块和内联元素的背景？

Question

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

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

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

Answer 1

这个小图将展示一个盒如何显示在浏览器中：

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

正如你所看到的，保证金是盒子本身可能被周围的任何内容之间的空间。边框只是围绕框的一条线。填充是盒子边缘与盒子内容之间的空间。您设置的任何背景都会填充整个框（在边框内），仍然保持框的边缘（空白区域）。

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

Answer 2

元素完全占用，不包括边距占用的空间。你可以用下面的标记/ CSS测试：

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

渲染，你会发现一个总的橙色框之间10px的 - 我们的利润。

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