The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Div sticks out when padding is added Reply To: Div sticks out when padding is added


By default, the css box model measures only the content of an element—i.e., the padding and borders are not counted and are rendered “outside” the width/height.

Say you have an element <div class=example>hello</div> styled like so:

     width: 100px;
    padding: 10px;
    border: 1px solid #000;

…then the content will be 100px wide, but the entire element will be 122px wide.


box-sizing: border-box;

To tell browsers that you want your boxes measured from the outside of the borders instead.