浮动元素上的填充 [英] Padding on floating elements

问题描述

如何添加填充到浮动：正确的项目，而不会弄乱的一切？不是填充应该在内部而不是外面工作？
查看绿色部分中某些填充内容发生了什么： http://lauradifazio.altervista.org/ cms /

解决方案

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

totalWidth = contentWidth + margin + border + padding

当使用CSS指定 width 属性时，您只需设置上述方程的 contentWidth / p>

例如，如果你试图将一个元素适合给定的空间量，你需要考虑所有的宽度因素，而不只是一个。所以，如果你只有200px的空间，并且你想要一个5px的边缘周围的内容，1px的边框和10px的填充，你必须按如下工作：

  contentWidth = availableWidth  -  margin  -  border  -  padding 
 contentWidth = 200px  - （2x5px） - （2x1px） - （2x10px）
 contentWidth = 200px  -  10px -  2px  -  20px 
 contentWidth = 168px 
 
 **请注意，（2xNN）表示您必须
的事实，同时考虑左右两侧的影响
的元素在总计。 
  

所以在你的CSS中，你可以将元素设置为：

  width：168px; 
 border：1px< color> < type> ;; 
 padding：10px; 
 margin：5px; 
  

这是W3C（即标准）框模型的工作原理。还有其他盒子模型，你可以使用 box-sizing CSS属性来定义你想要的盒子模型的工作方式，但你应该使用标准盒子模型。

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/

解决方案

The total space your element (any element, floated or not) takes up is as follows:

totalWidth = contentWidth + margin + border + padding

When you specify a width property with CSS, you're only setting the contentWidth of 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:

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.

So in your CSS, you would style the element as:

width: 168px;
border: 1px <color> <type>;
padding: 10px;
margin: 5px;

This is how the W3C (i.e. the standard) box model works. There are other box models you can force, using the box-sizing CSS property to define how you want your box model to work, but you should use the standard box model where possible.

这篇关于浮动元素上的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！