Data Haunting

Easy Solutions Destination

By

How to use box-sizing in CSS3

The property box-sizing of css(stylesheet) is used to determine that width and height of a element is calculated automatically. As we have seen many times that padding and border of the elements increased the size. box-sizzing border-box property is used to remove unnecessary padding and border of the elements in CSS3. In this article I will explain css3 box sizing example.

See we have below html code which generates output as shown in image

box sizing property

As you can see in above Image that without box-sizing property 1st input element increased it’s width. While using box-sizing border box property you can fix the elements border and padding. In 2nd input element if you see in code we have provided sizing class in which we used border-box value to box-sizing property. Here we also specified -webkit-box-sizing property for support in chrome and safari as well -moz-box-sizing property for Firefox so it can work perfectly in different browsers.

Box sizing property’s Different Values

  1. border-box Here we have used this value with box-sizing property. In this value width and height property includes padding and border but not the margin.
  2. padding-box This height and width property includes padding in border-box but does not include border and margin.
  3. content-box This is default style provided by Css standard and includes only content but it does not include padding, border and margin.

What is your opinion ?

Here we have seen that how box sizing is useful to overcome with border and padding issue of the element. I hope it will be very useful to you. If you have any query and question, you can comment or you can mail me.

Leave a Reply