Box sizing property is used to display the box content in the perfect arrangement manner. If you set the width,padding and border of the div.Like that if you set the width of the box will 100px, padding should be 10px and border should be 2px mean the total width of the box will calculated as 100px + left side padding 10px + right side padding 10px and border both left and right side should be 2px + 2px= 4px totally 100+20+4=124px the box will occupy. If you set the main container 200px and place the two div inside the main container on the adjacent side the output will be first div will be present at the first line and second dive will be present at the next line.
How to solve this problem you can use the box – sizing property to solve this problem.
Box Sizing has the two values
- Content Box
- Border Box
Content Box
Default css value for the box sizing will be content box.If you use the content box output will be like given below.Because it will take the width+padding+border-size as the total size. Below i will give the width:100px padding:10px border size:2px. Now its will take total size as 124px width for the div. Main div size will be 200px now the first div size will be 124px and second div size will be 124px.
.main-div{
Width:200px;
Box-sizing:content-box;
}
.div-one{
Width:100px;
Padding:10px
Border:2px solid #000;
}
.div-two{
Width:100px;
Padding:10px;
Border:2px solid #000;
}Output of Content Box:
Border Box:
If you use the border box it will remove the all the drawback in the content box. Its only take the 100px as the total width.
Output Of Border Box:
| Feature | Chrome | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | Yes | Yes | Yes | Yes | Yes |
