Chapter 10. CSS: Sizing and Spacing
Width
div element: Original
div element: Width 300px
p element: Original
p element: Width 300px
a element: Original
a element: Width 300px
span element: Original
span element: Width 300px
Height
div element: Original
div element: Height 100px
p element: Original
p element: Height 100px
a element: Original
a element: Height 100px
span element: Original
span element: Height 100px
Padding
div element: Original
div element: Padding 10px
p element: Original
p element: Padding 10px
a element: Original
a element: Padding 10px
span element: Original
span element: Padding 10px
Padding: nesting
div child element
div child element
Padding: multiple values
Margin
div element: Original
div element: margin 30px
p element: Original
p element: margin 30px
a element: Original
a element: margin 30px
span element: Original
span element: margin 30px
Margin: Overlap
height:20px; margin:20px
height:20px; margin:20px
height:20px; margin:20px
Margin: Child Margin and Parent Padding
Margin: multiple values
Paddingds for Specific Side
Before padding
padding-top: 50px
padding-bottom: 50px
padding-left: 50px
padding-right: 50px
Margins for Specific Side
Box Sizing
Box Examples
div Parent
div Child
Original Box Sizing
Content Box
Border Box