CSS Box Model
Standalone Box Model
Properties
Margin20px
Border10px
Padding20px
Width150px
Height100px
.box {
width: 150px;
height: 100px;
padding: 20px;
border: 10px solid;
margin: 20px;
}
margin: 20px
border: 10px
padding: 20px
150 × 100
Margin
Negative Margin
Border
Padding
Content
Computed Size
Total Width:250px
Total Height:200px
= margin×2 + border×2 + padding×2 + content
Parent-Child Box Model
Parent
Padding20px
Border8px
Child
Margin15px
Border6px
Padding12px
Width120px
Height80px
/* Parent */
.parent {
padding: 20px;
border: 8px solid;
}
/* Child */
.child {
width: 120px;
height: 80px;
padding: 12px;
border: 6px solid;
margin: 15px;
}
Parent: padding 20px, border 8px
border: 6px
padding: 12px
120 × 80
child margin: 15px
Parent Border
Parent Padding
Child Margin
Child Border
Child Padding
Child Content
Computed Sizes
Parent Content Area:186px wide
Child Total Width:186px
Child Total Height:146px
Child margin collapses with parent padding in certain conditions (margin collapsing).