CSS - box-sizing
box-sizing
box-sizing defines how the height and width of an element are calculated and if they should include borders and padding
this usually defines the box sizing and is included in a html reset like * { box-sizing:border-box; }
border-box makes calculating the sizes much easier in a layout so box-sizing is usually set to border-box.
Property Variable Name
box-sizingAvailable Values for box-sizing
content-box|border-box|initial|inheritExamples Using box-sizing values
Example using box-sizing content-box
Example using box-sizing content-box
Here is an example using different box-sizing values
Demo Box 1 Content 1
Code
<style>
.demo-box-1 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:240px;
width:100%;
transition: all 0.3s;
}
.demo-box-1 .dbs-1 {
font-size:14px;
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:120px;
width:120px;
box-shadow:0px 5px 10px #000;
border:3px solid #EEE;
border-radius:3px;
}
.demo-box-1 .dbs-1 {
transition: all 0.3s;
position:absolute;
box-sizing:content-box;
}
</style>
<h2>Example using box-sizing content-box</h2>
<p>Here is an example using different box-sizing values</p>
<div class='demo-box-1'>
<div class='dbs-1'>Demo Box 1 Content 1</div>
</div>Example using box-sizing border-box
Example using box-sizing border-box
Here is an example using different box-sizing values
Demo Box 2 Content 1
Code
<style>
.demo-box-2 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:240px;
width:100%;
transition: all 0.3s;
}
.demo-box-2 .dbs-2 {
font-size:14px;
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:120px;
width:120px;
box-shadow:0px 5px 10px #000;
border:3px solid #EEE;
border-radius:3px;
}
.demo-box-2 .dbs-2 {
transition: all 0.3s;
position:absolute;
box-sizing:border-box;
}
</style>
<h2>Example using box-sizing border-box</h2>
<p>Here is an example using different box-sizing values</p>
<div class='demo-box-2'>
<div class='dbs-2'>Demo Box 2 Content 1</div>
</div>Example using box-sizing initial
Example using box-sizing initial
Here is an example using different box-sizing values
Demo Box 3 Content 1
Code
<style>
.demo-box-3 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:240px;
width:100%;
transition: all 0.3s;
}
.demo-box-3 .dbs-3 {
font-size:14px;
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:120px;
width:120px;
box-shadow:0px 5px 10px #000;
border:3px solid #EEE;
border-radius:3px;
}
.demo-box-3 .dbs-3 {
transition: all 0.3s;
position:absolute;
box-sizing:initial;
}
</style>
<h2>Example using box-sizing initial</h2>
<p>Here is an example using different box-sizing values</p>
<div class='demo-box-3'>
<div class='dbs-3'>Demo Box 3 Content 1</div>
</div>Example using box-sizing inherit
Example using box-sizing inherit
Here is an example using different box-sizing values
Demo Box 4 Content 1
Code
<style>
.demo-box-4 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:240px;
width:100%;
transition: all 0.3s;
}
.demo-box-4 .dbs-4 {
font-size:14px;
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:120px;
width:120px;
box-shadow:0px 5px 10px #000;
border:3px solid #EEE;
border-radius:3px;
}
.demo-box-4 .dbs-4 {
transition: all 0.3s;
position:absolute;
box-sizing:inherit;
}
</style>
<h2>Example using box-sizing inherit</h2>
<p>Here is an example using different box-sizing values</p>
<div class='demo-box-4'>
<div class='dbs-4'>Demo Box 4 Content 1</div>
</div>