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

Before padding
Padding 10px
Padding 5px 10px
Padding 5px 10px 1px
Padding 5px 10px 1px 2px

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

hight:20px; margin: 20px

Margin: multiple values

Before padding
Margin 10px
Margin 5px 10px
Margin 5px 10px 1px
Margin 5px 10px 1px 2px

Paddingds for Specific Side

Before padding
padding-top: 50px
padding-bottom: 50px
padding-left: 50px
padding-right: 50px

Margins for Specific Side

Before padding
margin-top: 50px
margin-bottom: 50px
margin-left: 50px
margin-right:50px

Box Sizing

Box Examples

div Parent
div Child

Original Box Sizing

Content Box

Border Box

Back