Wednesday, May 18, 2016

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.


No comments:

Post a Comment