padding和margin到底要用哪一个?

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

选择,哪一个,困惑 padding和margin可以让一块区域的外观显示完全一样。所以可能让很多人认为padding和margin是可以互换的。其实它们的差别很大,而且选择哪个需要认真和慎重地考虑。我认为对容器使用padding还是对容器内的标签使用margin的原则:当隐藏这个容器或者容器内的标签时(现实项目中其实经常需要将某个部件隐藏、显示),对整体布局影响最小为益。
对于padding再说一句:ie6,ie7(FF)对带有padding样式的标签的宽度的解析是不一样的。ie6的标签宽度不包含padding-left和padding-right的值,而ie7和ff则是包含的。例如一个div的width设置100px,padding设为10px,而在ie6中它要占据的宽度是120px(包含10个padding-left和10个padding-right),而在ie7和ff中则占据100px的宽度。因为ie7和ff会认为100已经包含了20px的padding。
本文转自 netcorner 博客园博客,原文链接: http://www.cnblogs.com/netcorner/archive/2007/11/28/2912251.html  ,如需转载请自行联系原作者
相关文章
|
2月前
|
UED
em/px/rem/vh/vw区别
【10月更文挑战第24天】理解和掌握 em、px、rem、vh、vw 这几种单位的特点和应用,能够帮助我们更好地进行网页设计和布局,实现更优秀的用户体验和适应不同屏幕尺寸的能力。
|
3月前
|
前端开发
前端:行内元素的 margin 和 padding
在前端开发中,行内元素的处理是至关重要的。行内元素默认与其他元素在同一行显示,不会占据独立的空间。对于行内元素而言,其外边距(margin)和内边距(padding)的设置有特定规则:垂直方向上的外边距和内边距不会影响其他元素,但水平方向的则会增加元素的宽度,可能会影响相邻元素的位置。合理设置这些属性,可以有效控制页面布局与间距。
|
3月前
|
前端开发
content-box和border-box是什么?
content-box和border-box是什么?
152 0
|
8月前
|
编解码 前端开发 容器
vh,vw,px,%有什么区别
vh,vw,px,%有什么区别
390 0
|
8月前
|
前端开发
box-sizing: border-box;
box-sizing: border-box;
48 0
|
编解码 前端开发
说说em/px/rem/vh/vw区别?
说说em/px/rem/vh/vw区别?
119 0
你不知道的border-style border-radius background
你不知道的border-style border-radius background
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
529 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
html+css实战100-border和padding
html+css实战100-border和padding
110 0
html+css实战101-border和padding尺寸
html+css实战101-border和padding尺寸
118 0