Question

如何将padding添加到float：right项目而不会弄乱所有内容？填充不应该在内部而不是在外面工作？看看绿色部分上的一些填充会发生什么：http://lauradifazio.altervista.org/cms/

Answer 1

元素（任何元素，浮动或不浮动）占用的总空间如下：

totalWidth = contentWidth + margin + border + padding

使用CSS指定width属性时，您只需设置上述等式的contentWidth。

例如，如果您尝试将元素放入给定的空间量，则需要考虑所有宽度因子，而不仅仅是一个。因此，如果你只有200px的空间，并且你希望内容周围有5px的边距，1px的边框和10px的填充，你必须按照以下方式工作：

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属性来定义框模型的工作方式，但您应尽可能使用标准框模型。

Answer 2

请记住，填充会添加到您的宽度上。因此，如果包含5px填充，则200px宽度实际上是210px。正确的宽度应为190px。

Answer 3

元素的宽度不包括填充。如果向元素添加填充，则必须相应地减小宽度和高度。

Answer 4

您需要补偿元素的宽度。在您的情况下，请设置div的宽度190px而不是200px，因为您有5px的填充。

有用的资源：http://www.yourhtmlsource.com/stylesheets/cssspacing.html

填充浮动元素

4 个答案: