Adding padding to HTML elements - IE, FF, Chrome etc.

Question

Hello

I've a doubt. Lets consider that we have a div of width 200px. If i add the following the style

style="padding-left:10px; padding-right:10px"

to the element what happens actually? Will the total width of the div increases to 220px with 10px at the left (for left padding), original width 200px at the middle and 10px at the right (for right padding)?

Or will it takes the padding space from the 200px and becomes (10px + 180px + 10px)?

Does the above rendering differs for each browser (especially IE and FF)?

Update

<div style="width:180x">    
<div style="width: 180px;background-color: #4E81BD;text-align: left;padding-left: 5px;padding-right: 5px;">
    <a class="anchor-tag" href="Javascript:;"><span style="font-family: Calibri,Tahoma,Verdana;font-weight: 500; color: white">Rasu</span></a>
</div>
<div style="width: 180px;height: 270px;border: 1px solid #4E81BD;padding: 5px;overflow-y: auto;overflow-x: hidden;">
    <div style="border: 1px solid #DADADA;height: 150px;overflow-x: hidden;overflow-y: auto;text-align: left;font-family: Calibri;">
    </div>
    <div style="height: 10px;">
    </div>
    <div style="height: 75px;border: 1px solid #DADADA;">
        <textarea>[Type your message here]</textarea>
    </div>
</div>
</div>

Thank you

NLV

Answer 1

It will become 220px wide.

In IE5 or IE6 (quirks mode), it will be 10px+180px+10px, but I wouldn't worry about that.

The full story can be found here: http://www.quirksmode.org/css/box.html

Answer 2

All modern browsers conform to the W3C box model. See here for details. Here's a diagram demonstrating how the overall dimensions of a box are calculated:

Essentially the dimensions of a box are width + padding + border. The margin is not added to the width, although it may affect the box's positioning.

Philippe is correct about IE5, which has a broken box model.

If you'd like to alter the way the box model works, you can use the box-sizing CSS3 attribute, though at this stage you'll have to also use -webkit-box-sizing, -ms-box-sizing and -moz-box-sizing to ensure that the different browsers all pick up the value.

More details here: http://www.quirksmode.org/css/box.html