CSS中的边距和填充有什么区别?在何种情况下:

两者都有效。只有保证金是合适的。只有填充是合适的。


当前回答

我总是使用这个原则:

这是Firefox中inspect元素特性的方框模型。它像洋葱一样工作:

你的内容在在中间。填充是指内容和标签边缘之间的空间在…内边界及其规格边距是标记周围的空格。

因此,更大的边距将在包含内容的框周围腾出更多空间。

较大的填充将增加内容和其所在的框之间的空间。

如果将框设置为特定值,则它们都不会增加或减小框的大小。

其他回答

从…起https://www.w3schools.com/css/css_boxmodel.asp

不同部分的说明:内容-框的内容,其中显示文本和图像填充-清除内容周围的区域。填充物是透明的边框-围绕填充和内容的边框边距-清除边界外的区域。边距是透明的

实时示例(通过更改值进行模拟):https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

关于边距的问题是,您不必担心元素的宽度。

就像当你给出一些{padding:10px;}时,你必须将元素的宽度减少20px,以保持“适合”,而不干扰周围的其他元素。

因此,我通常从使用填充来“填充”所有内容开始,然后使用边距进行微调。

另一点需要注意的是,不同浏览器上的填充更为一致,IE对负边距的处理也不太好。

需要注意的一点是,当自动折叠的边距让你烦恼时(并且你没有在元素上使用背景色),使用填充更容易。

我所见过的最好的例子、图表,甚至是“自己试试看”的观点都在这里。

我认为下面的图表可以立即直观地理解两者的区别。

需要记住的一点是,符合标准的浏览器(IE怪癖是一个例外)只将内容部分渲染为给定的宽度,因此在布局计算中要注意这一点。还要注意的是,随着Bootstrap 3的支持,border box有点卷土重来。

这里有一些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>