Home/ Questions/Q 873531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T10:57:09+00:00

I’ve a doubt. Lets consider that we have a div of width 200px. If

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    alt text

    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

    • 0