Padding on floating elements [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 9 years ago.

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: ht开发者_Python百科tp://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.

---

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.

---

You need to compensate for the width of the element. In your case, make the div's width 190px instead of 200px since you have 5px of padding.

Helpful Resource: http://www.yourhtmlsource.com/stylesheets/cssspacing.html