清除内外边距
简写:
*{
padding: 0;
margin: 0;
}
比较正式的话如下:
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p {
padding: 0;
margin: 0;
}
注意:行内元素只有左右外边距,没有上下外边距,内边距,在低版本浏览器会有问题
所以尽量不给行内元素指定上下的内外边距就好
外边距合并
外边距合并,垂直的块级盒子以最大的外边距为准
所以尽量避免,只给一个盒子外边距即可
嵌套块元素垂直外边距的合并
以下为外边距塌陷合并问题
.father {
width: 300px;
height: 300px;
background-color: blue;
margin-top: 100px
}
.son {
width: 200px;
height: 200px;
background-color: green;
margin-top: 30px;
}
解决方案
1.可以为父元素定义1像素的上边框或上内边框
2.可以为父元素添加overflow:hidden
法1
.father {
width: 300px;
height: 300px;
background-color: blue;
margin-top: 100px;
border: 1px solid red; /* 解决外边距合并(塌陷)问题 */
}
法2
.father {
width: 300px;
height: 300px;
background-color: blue;
margin-top: 100px;
padding: 1px; /*解决外边距合并(塌陷)问题*/
}
法3
.father {
width: 300px;
height: 300px;
background-color: blue;
margin-top: 100px;
overflow: hidden; /* 解决外边距合并(塌陷)问题 */
}