CSS中的边距和填充有什么区别?在何种情况下:
两者都有效。只有保证金是合适的。只有填充是合适的。
CSS中的边距和填充有什么区别?在何种情况下:
两者都有效。只有保证金是合适的。只有填充是合适的。
当前回答
边距位于块元素的外侧,而填充位于内侧。
使用边距将块与块外的东西分开使用填充将内容移离块的边缘。
其他回答
我所见过的最好的例子、图表,甚至是“自己试试看”的观点都在这里。
我认为下面的图表可以立即直观地理解两者的区别。
需要记住的一点是,符合标准的浏览器(IE怪癖是一个例外)只将内容部分渲染为给定的宽度,因此在布局计算中要注意这一点。还要注意的是,随着Bootstrap 3的支持,border box有点卷土重来。
关于边距的问题是,您不必担心元素的宽度。
就像当你给出一些{padding:10px;}时,你必须将元素的宽度减少20px,以保持“适合”,而不干扰周围的其他元素。
因此,我通常从使用填充来“填充”所有内容开始,然后使用边距进行微调。
另一点需要注意的是,不同浏览器上的填充更为一致,IE对负边距的处理也不太好。
边距在框外,填充在框内
边距会清除元素周围的区域(边界外),但填充会清除元素内容周围(边界内)的区域。
这意味着您的元素不知道其外部边距,因此如果您正在开发动态web控件,我建议您尽可能使用填充与边距。
请注意,有时您必须使用保证金。
对你的问题有更多的技术解释,但如果你想要一种方法来思考边距和填充,这个类比可能会有所帮助。
将块元素想象成挂在墙上的相框:
照片就是内容。垫子是衬垫。边框是边框。墙就是视口。两帧之间的间距是边距。
考虑到这一点,一个很好的经验法则是,当您希望将一个元素与墙上的其他元素隔开时,使用边距,当您调整元素本身的外观时,使用填充。边距不会改变元素的大小,但填充会使元素变大1。
1可以使用框大小属性更改此行为。