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
<title>width 100% and left right padding</title>
border: 2px solid #09F;
border: 1px solid #963;
<body style="padding-top: 30px; background-color: #ccc">
<div style="margin: 0px auto; max-width: 600px; padding: 30px; background-color: #fff">
<div style="padding-bottom: 20px; float: left; width: 100%; color: #F00">Without box-sizing property, the (input) below is 100% wide and has a border and padding</div>
<input type="text" class="input" />
<div style="padding: 20px 0px; color: #F00; float: left; width: 100%;">With box-sizzing property, the padding and border go inside the box</div>
<input type="text " class="input sizing" />
<div style="clear: both;"></div>
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
- 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.
- padding-box This height and width property includes padding in border-box but does not include border and margin.
- 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.