BlogsDope image BlogsDope

CSS box-sizing

Oct. 21, 2017 CSS EXAMPLE 4112

The box-sizing property is used to change the default CSS box model to alter the width and height of elements. This property controls whether the width and the height of elements include padding, border or margin.

CSS

box-sizing: value;

Before looking at its values, have a brief look at what a CSS box model looks like.

CSS Box Model

The box model of an element contains four boxes - content box, padding box, border box and margin box.

box model

The content box contains all the content like text, images, tables of the element. Padding is the area around the content of the element that separates it from the border. Any background color or image set to the element extends to the padding area also. The border area surrounds the padding area and contains the borders. Lastly, the margin area is an empty area that surrounds the border area. It is used to separate the element from other elements which are its neighbors. The larger the margin, more is the distance of the element from its neighbors.

So what comprises of the width and the height of the element?

The properties width and height determine the width and height of the content area. On giving padding and borders, the visible or rendered width and height increase. This is shown by the following equations.

width + padding + border = actual visible width

height + padding + border = actual visible height

Values

The three values content-boxpadding-box and border-box that this property can take are explained in separate subheadings. Apart from this, it can take two other universal values which are listed below.

initial : Sets the initial value for the property.

inherit : Inherits the value from parent element.

content-box

This is the default value. The width and height (and thus min-widthmax-widthmin-height and max-height) properties determine the width and height of only the content box. Padding, border and margin are not included. Thus, the actual visible width and height are different from what is determined by the width and the height properties. This is the same as explained in the box model above.

content-box

See the Pen box-sizing: content-box by Aakhya Singh (@aakhya) on CodePen.

Both the div elements are given the same width and height. Since the value given to the box-sizing property is content-box, so the assigned width and height are that of the content. Therefore, the width and the height of the content of both the div elements are equal and are not affected by the addition of padding and border to the second div.

padding-box

The width and height determined by the properties width and heightrespectively include the content as well as the padding. It doesn't include the border or the margin.

padding-box

Currently, this value is supported by only Firefox, though it has been removed from the specification.

border-box

The width and height determined by the properties width and heightrespectively include the content, the padding and the border. It doesn't include the margin. So in this case, the dimensions defined by the properties widthand height are the same as the actual visible dimensions of an element.

border-box

See the Pen box-sizing: border-box by Aakhya Singh (@aakhya) on CodePen.

In the above demo, both the div elements are given the same width and height values. For the first div, these values are equal to the dimensions of the content area. For the second div which is given box-sizing: border-box, these values are equal to the width and height of the combined area containing the content, the padding and the border.

Why bother about box-sizing?

The box-sizing property is mainly used to change the default CSS box model by giving the border-box value.

It helps to maintain the desired layout which may be disturbed by the addition of padding or border in the default CSS box model. The following two examples will help you understand its necessity.

See the Pen box-sizing: content-box by Aakhya Singh (@aakhya) on CodePen.

This is the default box model where the width and height values given to the parent are 400px and 470px respectively. The width of the first child div is given 80% of that of the parent, which became just the width of the content of the child div. So adding padding and border made its visible width greater than the width of its parent. Similarly, the second and the third child div are given widths 50% that of the parent, but padding and borders made their actual visible width greater and these occupied more space.

This problem can be overcome by setting the box-sizing property to border-box which makes the width and the height values include padding and border as shown in the following demo.

See the Pen box-sizing: border-box by Aakhya Singh (@aakhya) on CodePen.

Universal box sizing

It's better to set the box sizing to all the HTML elements all at once using the * selector if you want to apply the same box sizing for your entire layout.

CSS

* {
	box-sizing: border-box;
}

But this does not change the default value for pseudo elements. So, you need to include the following code as well for pseudo elements.

CSS

*, *:before, *:after {
	box-sizing: border-box;
}

Browser Support

This property is supported by all the modern browsers. To gain support from older browsers, you need to include the prefixes -webkit and -moz.

CSS

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

The value border-box is supported by all the current versions of major browsers. padding-box is supported by only Firefox. IE 8 and its older versions do not support the border-box value with min-widthmax-widthmin-height and max-height.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).