CSS3 box model

CSS3 introduces a new box-model property – box-sizing. First of all, let’s remember the default CSS box-model.

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #94c681;
}

The browsers will expand the box, and the final width will be 140px and the height, 140px.
width/height = 100px [width/height] + (2 x 10px [padding]) + (2 x 10px [border])

However, sometimes we need the box to be 100px regardless of the padding or the borders added. To overcome this problem, when creating a web page layout, we can use the CSS3 box-sizing property to control how the CSS box model should work in the browsers.

The box-sizing property

The box-sizing property has two value options:

  • content-box is the default value, the default box-model
  • border-box, where the box’s size will be calculated by substracting the specified content’s size with the padding and the borders added.
div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #94c681;

  box-sizing: border-box;
  -moz-box-sizing: border-box; /*Firefox 1-3*/
  -webkit-box-sizing: border-box; /* Safari */
}

Now, the width of the box will decrease at 60px. and the total size of the box remains 100px.
width/height = 100px [width/height] – ((2 x 10px [padding]) + (2 x 10px [border]))

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s