CSS内边距
内边距是设置盒子与子盒子之间的距离。
pading: 10px; 设置上下左右都是10px的内边距。
padding:10px 12px;设置上下是10px的宽度,左右是12像素的宽度。
pading:10px 12px 13px 14px; //分别设置的是上右下左
如果设置三个值:上左右下
CSS外边距
外边距设置兄弟元素之间的距离。
margin的设置跟padding的一样。
margin:0 auto;可以让块级元素水平的居中。
原理:auto是设置外边距自动赋值。如果左右都是auto的时候,会把盒子所在行剩余的宽度除以2,然后分别赋值给左右的magin值,自然就会让盒子居中显示了。
行内元素的margin(padding)只能在水平方向起作用。垂直方向不起作用。
外边距的合并
第一种外边距合并的情况:
当两个块级元素,上面块级元素拥有下外边距,下面的块级元素拥有上外边距的时候。两个盒子上下的距离会取两个边距的最大值,而不是把两个盒子的边距进行加和处理。
第二种外边距合并的情况:
当块级元素进行嵌套的时候,如果父盒子没有设置上边框和上内边距的话,子盒子的上外边距和复盒子的上外边距会进行合并。
快捷键:
.box$*3+Tab键 ($符是编码的意思)
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
网友评论