CSS3 Box Sizing CSS3

What is Css Box Sizing?

CSS Box sizing property is used to alter the height and width of element.

In css2, the box sizing property worked as it is shown below −

width + padding + border = actual visible/rendered width of an element's boX

height + padding + border = actual visible/rendered height of an element's box

CSS Box Sizing defines a set of height and width, which appears bit bigger than the actual size because the element border and paddings are added additional to the elements height and width.

What is CSS2 sizing property?

Above is an image is having the same height and weight of two elements butthe result varies, because,the second one includes CSS padding property.

It will produce following result:

CSS2 sizing property

What is CSS3 box sizing property?

As mentioned above, the sample having the same height and width with box-sizing:border-box is shown below:

It will produce following result:

box-sizing:border-box

Above elements are having same height and width with box-sizing:border-box so result is always same for both elements as shown above.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS3 Topics