CSS中的边距和填充有什么区别?在何种情况下:
两者都有效。只有保证金是合适的。只有填充是合适的。
CSS中的边距和填充有什么区别?在何种情况下:
两者都有效。只有保证金是合适的。只有填充是合适的。
当前回答
这里有一些HTML演示了填充和边距如何影响可点击性和背景填充。一个对象会收到对其填充的点击,但对对象空白区域的点击会转到其父对象。
$(“.other”).click(函数(e){console.log(“外部”);e.停止传播();});$(“.intern”).click(函数(e){console.log(“内部”);e.停止传播();});.外部{填充:10px;背景:红色;}.内部{边距:10px;填充:10px;背景:蓝色;边框:纯白1px;}<script src=“http://code.jquery.com/jquery-latest.js“></script><div class=“outer”><div class=“inner”style=“位置:相对;高度:0px;宽度:0px”></div></div>
其他回答
边距会清除元素周围的区域(边界外),但填充会清除元素内容周围(边界内)的区域。
这意味着您的元素不知道其外部边距,因此如果您正在开发动态web控件,我建议您尽可能使用填充与边距。
请注意,有时您必须使用保证金。
边距位于块元素的外侧,而填充位于内侧。
使用边距将块与块外的东西分开使用填充将内容移离块的边缘。
需要注意的一点是,当自动折叠的边距让你烦恼时(并且你没有在元素上使用背景色),使用填充更容易。
首先,让我们看看有什么不同,以及每个责任是什么:
1) 保证金CSS边距财产用于在元素周围生成空间。边距财产设置了边境使用CSS,您可以完全控制边距。有用于设置元素每边边距的CSS财产(顶部、右侧、底部和左侧)。
2) 衬垫CSS填充财产用于在内容周围生成空间。填充将清除内容(边框内)周围的区域元素。使用CSS,您可以完全控制填充。那里是CSS财产,用于设置元素每一侧的填充(顶部、右侧、底部和左侧)。
所以简单地说,边距是元素周围的空间,而填充是元素内容周围的空间。
这张来自codemancers的图片显示了边距和边框是如何结合的,以及边框和内容框是如何使其不同的。
此外,他们对每个部分的定义如下:
内容-这定义了文本、图像或其他元素等实际内容所在的框的内容区域。填充-这将清除其包含框中的主要内容。边框-它包围内容和填充。边距-此区域定义一个透明空间,将其与其他元素分隔开。
关于边距的问题是,您不必担心元素的宽度。
就像当你给出一些{padding:10px;}时,你必须将元素的宽度减少20px,以保持“适合”,而不干扰周围的其他元素。
因此,我通常从使用填充来“填充”所有内容开始,然后使用边距进行微调。
另一点需要注意的是,不同浏览器上的填充更为一致,IE对负边距的处理也不太好。