margin和padding辨析以及应用场景

半年前学习css的时候很多东西都是一笔带过,现在回过头来仔细看看里面的知识点。事实上,越是这种看似简单的内容更要静下心来认真揣摩。

首先看看盒子模型(box model)图,具体内容在这就不介绍了,这里重点放在margin和padding上面,一个形象的说法是,比如一个盒子里有一个瓶子,瓶子与盒子之间的距离就称为padding,盒子与另一个盒子之间的距离就称为margin。

下面看看实例

margin-top情况下

分析:

灰色部分为宽度为10的boder,金黄色部分为父元素center,session1和session2为两个并列的子元素

我们在浏览器中打开调试器,经过调试我们发现:

逐渐减小session1的margin-top大小,session1和session2部分会整体上移,两者之间的距离不会改变,而且session1的背景色大小也一直没有改变,当值为0时,session1的上边框与center的上边框会重叠,而且margin-top的值也可以为负值,此时session1部分进入到top部分

逐渐减小session2的margin-top大小,session2部分会整体上移,session1部分保持不动,当值为负值时session2进入session1

改margin-top为padding-top:

打开调试,我们发现:

减小session1的padding-top值,session1部分的背景色区域大小一直在改变,但padding-top的最小值只能为0px,不能为负值,也没有挤入其他部分的情况

根据以上分析,总结出:

margin(边界)是元素周围生成额外的空白区,空白区是指其他元素不能出现且父元素背景可见的区域。它是透明的,没有背景色。

padding为内边距,即边框里内容正文的距离,在css权威指南中叫做“留白”,似乎这种称谓更加生动。它是不透明的,有背景色的。

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

margin用来分割两个块元素,而padding更多情况下来扩展元素,在不固定高度布局中,padding用来撑起元素高度。

margin会发生上下边框折叠 ,会发生挤入现象,padding不会

padding会占据背景图片

padding和border会扩展元素的可见区域

margin会有负值,而padding没有负值

何时应当使用margin

需要在border外侧添加空白时。

空白处不需要背景(色)时。

上下相连的两个盒子之间的空白,需要相互抵消时。如15px+20px的margin,将得到20px的空白。

何时应当时用padding

需要在border内测添加空白时。

空白处需要背景(色)时。

上下相连的两个盒子之间的空白,希望等于两者之和时。如15px+20px的padding,将得到35px的空白。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180404G07LY500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券