• 首页
  • html5
  • padding margin 的盒子模型 及 0 auto 为何能居中

padding margin 的盒子模型 及 0 auto 为何能居中

初学css 的同学很难分清 margin 和 padding 真正所表达的意思.


很早之前我们知道 padding 表示内边距, margin 表示外边距.这个定义让人迷惑.


按照上面的盒子模型,可能理解起来更好一点.这个图里有一个盒子,就是除去最外层黄色部分.这时你独立看剩下的这个盒子,padding 表示content 距离盒子上下,左右边的距离(不包括border本身距离)


所以 padding 是指盒子内容相对盒子本身上下左右各边的距离.

当然也可以 单独通过 padding-top,padding-right,padding-bottom,padding-left 来分别制定不同方向的边框.


margin在上面这个图的表示是什么?

其实还是那个盒子(除去外层黄色部分)相对于其他盒子的距离.


margin 有一个参考值,就是另外一个盒子,如果上面的图在四周分别再加4张图,可能更好的说明 margin 的属性.

左边盒子我们称为 A , 右边盒子我们称为 B

A盒子的margin 是指A 盒子离B 盒子的距离.这个距离是透明不可见的(见上图 margin 所在的区域)


margin 相对4个方向也有4个单独的属性可以设置:

margin-top.margin-right,margin-bottom,margin-left 


所以一句话总结:

padding 解决的是内部矛盾 (内容和盒子本身边距)

margin 解决的是外部矛盾  (盒子与四周其他盒子之间的距离)


经常你会看到页面最外层的div 布局会给定一个 width 或者 max-width 属性值,同时也会给定 margin: 0 auto;

这一句话的作用就是让 div 居中显示.


为什么会这样,这里一定是 margin:0 auto; 起到的作用.(你不会是以为width 决定的吧,邪恶了...)


那我们就来看看 margin 为何有这样的功能.


上面我们了解到了 margin 的作用,盒子与盒子之间的距离,这里我们说的最外面的div ,它的margin 肯定是相对于 body 的距离的.

 0 auto 这种属性值如何解读.


首先我们需要了解 margin 的赋值方法:

  1. margin: 5px 5px 5px 5px;  值当前盒子相距上下左右的盒子为5个像素.

  2. margin:5px;    这种写法很简单,和上面的意思一样,表示当前盒子距离上下左右盒子为5个像素.

  3. margin:0 5px;  2个属性值的赋值方法,前面表示距离上下盒子,后面表示距离左右盒子距离.


知道了上面3种命名方法,那么回头再看  margin:0 auto; 

你就明白这里设置此盒子距离body 上下距离为0px ,距离body左右边距自动调整.会自动调整左右边距相等.所有达到居中效果.



回到顶部