margin和padding的使用区别

1.平面图

图1

2.立体图

在这里插入图片描述

3.margin 外边距

元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

关于外边界距离的设定,规则如下:
/*四周相同*/
margin: 20px;

/*10px上下 20px左右 */
margin: 10px 20px;

/*10px上  15px左右  30px下*/
margin: 10px 15px 30px;

/*上右下左*/
margin: 10px 15px 20px 25px;

/*设置自动居中则可以使用*/
margin:0 auto;

4. padding 内边距(补白)

  • 称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象。补白(padding):补白位于元素框的边界与内容区之间。很自然,用于影响这个区域的属性是padding。——CSS权威指南

  • padding的用法 大体上来说,与margin略有不同,但是在距离设定上一致,此处不再叙述。

5.margin和padding的使用区别

  • margin和padding在许多地方往往效果都是一模一样,而且你也不能说这个一定得用margin那个一定要用padding,因为实际的效果都一样,你说margin用起来好他说padding用起来会更好,但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的:

  • 何时应当使用margin:
    需要在border外侧添加空白时。空白处不需要背景(色)时。上下相连的 两个盒子之间的空白,需要相 互抵消时。
    如15px+20px的margin,将得到20px的空白。

  • 何时应当时用padding
    需要在border内测添加空白时。空白处需要背景(色)时。上下相连的两个盒子之间的空白,希望等于两者之和时。
    如15px + 20px的padding,将得到35px的空白。

  • 个人认为
    margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。

  • 43
    点赞
  • 239
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值