浮动元素上的填充
如何向 float:right 项目添加填充而不让它弄乱一切？填充不是应该在内部而不是外部起作用吗？ 看看绿色部分上的一些填充会发生什么：http://lauradifazio.altervista.org/cms/
How do I add padding to a float:right item without having it to mess up everything? Isn't padding supposed to work on the inside not the outside?
Look at what happens with some padding on the green part: http://lauradifazio.altervista.org/cms/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您的元素（任何元素，无论是否浮动）占用的总空间如下：
totalWidth = contentWidth + margin + border + padding当您使用 CSS 指定
width属性时，您只需设置上述方程的contentWidth。例如，如果您尝试将一个元素放入给定的空间量中，则需要考虑所有宽度因素，而不仅仅是一个。因此，如果您只有 200 像素的空间，并且您希望内容周围有 5 像素的边距、1 像素的边框和 10 像素的填充，则必须按如下方式进行操作：
因此，在 CSS 中，您可以将元素样式设置为：
这就是 W3C（即标准）盒子模型的工作原理。您还可以强制使用其他盒子模型，使用
box-sizingCSS 属性来定义您希望盒子模型如何工作，但您应该尽可能使用标准盒子模型。The total space your element (any element, floated or not) takes up is as follows:
totalWidth = contentWidth + margin + border + paddingWhen you specify a
widthproperty with CSS, you're only setting thecontentWidthof the above equation.For example, if you were trying to fit an element into a given amount of space, you need to take all of the width factors into consideration, not just one. So, if you only have 200px of space, and you want a 5px margin around the content, with a 1px border, and 10px of padding, you would have to work it as follows:
So in your CSS, you would style the element as:
This is how the W3C (i.e. the standard) box model works. There are other box models you can force, using the
box-sizingCSS property to define how you want your box model to work, but you should use the standard box model where possible.请记住，填充会添加到您的宽度上。因此，如果包含 5 像素的填充，则 200 像素的宽度实际上是 210 像素。正确的宽度应该是 190px。
Remember that padding is added on to your width. So your 200px width is actually 210px if you include the 5px padding. The correct width should be 190px.
元素的宽度不包括填充。如果向元素添加内边距，则必须相应地减小宽度和高度。
The width of an element does not include padding. If you add padding to an element, you must decrease width and height accordingly.
您需要补偿元素的宽度。在您的情况下，将 div 的宽度设置为
190px而不是200px，因为您有 5px 的填充。有用的资源：http://www.yourhtmlsource.com/stylesheets/cssspacing.html
You need to compensate for the width of the element. In your case, make the div's width
190pxinstead of200pxsince you have 5px of padding.Helpful Resource: http://www.yourhtmlsource.com/stylesheets/cssspacing.html