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:

.example{
     width: 100px;
    padding: 10px;
    border: 1px solid #000;
}

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

Use

box-sizing: border-box;

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