<分区>
如何向 float:right 元素添加填充而不让它弄乱一切？填充不是应该在内部而不是外部工作吗？ 看看绿色部分的一些填充会发生什么:http://lauradifazio.altervista.org/cms/
<分区>
如何向 float:right 元素添加填充而不让它弄乱一切？填充不是应该在内部而不是外部工作吗？ 看看绿色部分的一些填充会发生什么:http://lauradifazio.altervista.org/cms/
最佳答案
您的元素(任何元素， float 与否)占用的总空间如下:
totalWidth = contentWidth + margin + border + padding
当您使用 CSS 指定 width 属性时，您只是在设置上述等式的 contentWidth。
例如，如果您试图将一个元素放入给定的空间量，则需要考虑所有宽度因素，而不仅仅是一个。因此，如果您只有 200 像素的空间，并且希望内容周围有 5 像素的边距、1 像素的边框和 10 像素的填充，则必须按如下方式进行处理:
contentWidth = availableWidth - margin - border - padding
contentWidth = 200px - (2x5px) - (2x1px) - (2x10px)
contentWidth = 200px - 10px - 2px - 20px
contentWidth = 168px
**note that the (2xNN) refers to the fact that you have to
consider both the impact to both the left and right side
of the element in the total.
因此在您的 CSS 中，您可以将元素设置为:
width: 168px;
border: 1px <color> <type>;
padding: 10px;
margin: 5px;
这就是 W3C(即标准)盒子模型的工作原理。您可以强制使用其他盒模型，使用 box-sizing CSS 属性来定义您希望盒模型如何工作，但您应该尽可能使用标准盒模型。
关于html - 填充 float 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4208939/