CSS Box Sizing

The CSS Box Model describes the way block boxes are formatted. Block boxes can be given dimensions, margins, padding, and borders.

When we add these properties to a block box, and that box has a height and / or width applied, that box will increase in size according to the values assigned to these properties.

Example:

Assume we have placed a div tag on the page. The div tag generates a Block Box.

Assume that we gave that div a width of 500px and gave it padding of 10px on all 4 sides of the box.

According to the CSS Box Model, the total width of that div is now 520px: 500px + 10px + 10px

In the above example, the box properties (padding, margins, borders) are added to the box, making it grow is size.

CSS – Box Sizing Property

Now, with the CSS3 box-sizing property, we can change the way box properties are calculated and rendered in a browser.

If we use box-sizing with a value of “border-box”, then borders and padding will be added to the inside of the box and will not cause the total width or height of a block box to increase in size.

Box-Sizing with a value of ‘border-box’ can really come in handy. For instance, let’s suppose you add a div tag to the page, you float the div to the left or right. Well, when you float a div, you need to give that div a width. Otherwise, you will not have control over the total width and your layout or design may suffer because of this. Thus, a width is needed.

Now suppose you need to add padding to this floated div that has a width, but you do not have enough space to accommodate this or you find yourself having positioning issues due to this — a simple way to handle this is to use the box-sizing property with a value of border-box.

MUST USE VENDOR PRE-FIXES

Because box-sizing only has the partial support for most browsers, we must use these pre-fixes to gain full support in all the browsers.

div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */

box-sizing: used to control the way box properties are calculated when added to a Block Box.
Initial {Default) Value: content-box (specified borders, padding, and margins will be added to the total height and or width if these dimensions are specified.)
Values: content-box | border-box | Inherit
Inherited: No
box-sizing: Border-box; specified borders and padding will be added to the inside of the box and will not cause the total width or height of a block box to increase in size.
Advertisements
This entry was posted in CSS3, html5, HTML5 AND CSS3, Uncategorized and tagged , , . Bookmark the permalink.

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