Do not use widths and indents / margins on the same element?

Question

I have seen many people mention that you should not use width and padding or margins for the same element with CSS. Why is this?

Answer 1

Because some browsers see width as the total width of an element, including padding and margins, while others view width as the width of the base, to which padding and margins are added. As a result, your design will look different in different browsers.

For more information, see the W3C page on the Box model and quirksmode take .

Answer 2

Many people still cling to the concepts of faulty box models in IE and think that if you start messing around with element widths, padding, and margins, you'll run into problems.

This is a fairly outdated tip - if you use the correct doctype , all pretty modern browsers (including IE6 +) will work the same and you should not have too many problems associated with this.

This is CSS, you will obviously have a million other cross-browser issues, but the infamous IE-box model is a thing of the past.

Answer 3

I have never encountered a problem caused by using width, padding and / or margins together.

As long as you have a valid DOCTYPE and are not in Quirks mode, you will have a predictable box model, and for this you should use the one that is most suitable from the field / add-on to represent what you are trying to do.

Note: Margin is applied outside the borders, gasket is applied inside the borders. Width means the inner width of the container, Total width = border + border + padding + width (remembering that the first three are added for both the left and right sides).

Answer 4

You declare that fill values ​​and / or fields should not coexist with a DOM element that also has a width value assigned to it? If this is the case, this is true only if you do not want to write CSS that is compatible with both IE and browsers that implement web standards (e.g. Firefox). It would be difficult to achieve the layout you are looking for, usually without any stock or stock. But I suggest you write CSS compatible for both browsers. If this is not what you are asking for, then please correct me :)

Answer 5

The reason may be the famous problem with the model .

Summary: IE displays a width other than standard rendering if padding and margin are used with width or height.

Answer 6

I can think of two reasons:

1) the old "box model" IE is really flaky, so when you have an element with style {width: 300px; gasket: 30px; margin: 20px;} it may not actually correspond to the expected 400px (size 300 px, plus 2 30px padding, plus 2 20 px margin). I think its actual width will be 340, as it throws the padding into a width calculation.

which brings ...

2) Some people find the calculations a bit confusing.

However, I personally use width along with padding and margins and have no problems with that. If you limit yourself to not using width when using paddings / margin, it means that you will put your code in a lot of non-semantic cracks. This means that you should know what different browsers will do with the element, but that’s why we are browsing.

Answer 7

It is important to note that using percent width is almost impossible. Take this, for example, if you want your “content” div to accept full width but have 10px indents:

#content { width: 100%; padding: 0 10px; } 

This works in the (reasonable, but incorrect) IE model, but in standard compliant browsers your div will occupy 100% + 20 pixels wide, which is not good. The solution is to use another “internal” container.

 <div id="content"> <div class="inner"> content here. </div> </div> #content { width: 100%; } #content .inner { padding: 0 10px; } 

This is a bit annoying for the extra markup, but in the end it will simplify a lot.