块和内联元素的背景？

Question

框背景中的背景是什么（内容，填充，边框和边距）？

换句话说，如果我将它设置为绿色，那么盒子模型的哪一部分将被设置为显示背景颜色？

是否只是块元素（div，标题等）适用于盒子模型？内联元素（span，text）是否也有填充，边框和边距？

Answer 1

元素完全占用，不包括边距占用的空间。您可以使用以下标记/ css进行测试：

.block { margin:5px; padding:0; width:25px; height:25px; 
         background-color:orange; float:left; }
<div class="block"></div>
<div class="block"></div>

渲染一下，你会发现橙色框之间总共有10个像素 - 我们的边距。

内联元素也有填充和边距，但是你不能总是以相同的方式使用它们，因为它们是内联的，而不是块级的。

Answer 2

这个小图表将演示如何在浏览器中显示框：

box-chart http://img132.imageshack.us/img132/2692/boxchart.jpg

如您所见，边距是框本身与可能围绕它的任何内容之间的空间。边框只是框周围的一条线。填充是框的边缘和框内的内容之间的空间。您设置的任何背景都将填满整个框（在边框内），仍然保持框周围的边距（空白区域）。

我相信几乎每个元素都可以使用边距，背景和边框。但是，有些元素不支持填充，除非它是块级的，因为它基本上与margin是完全相同的。您可以随时根据您设置的样式测试不同的样式，以查看哪些有效，哪些无效以及如何移动。