刚开始写网页对于margin与padding真是傻傻分不清,为什么说分不清呢,第一纠结于他俩这不差不多,到底用哪个。第二,用了这个为啥不起作用,到底要用那个!!为此写下以下经验告诫自己不要傻傻分不清了。
-
写网页通用的地方
*{
margin:0;
padding:0;
}
否则就会发现写的页面不能很好的融合到网页上。
2.外边距margin 内边距padding
3.外边距(margin)重叠问题
外边距重叠是指两个垂直相邻的块级元素,当上下两个边距相遇时,起外边距会产生重叠现象,且重叠后的外边距,等于其中较大者。
图示:
另一个重叠现象是当一个元素包含在另一个元素之中时,子元素与父元素之间也会产生重叠现象,重叠后的外边距,等于其中最大者:
同理,如果一个无内容的空元素,其自身上下边距也会产生重叠。
外边距重叠的意义
外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。
防止外边距重叠解决方案:
虽然外边距的重叠有其一定的意义,但有时候我们在设计上却不想让元素之间产生重叠,那么可以有如下几个建议可供参考:
- 外层元素padding代替
- 内层元素透明边框 border:1px solid transparent;
- 内层元素绝对定位 postion:absolute:
- 外层元素 overflow:hidden;
- 内层元素 加float:left;或display:inline-block;
- 内层元素padding:1px;