Chapter 14. CSS: Layout – Key Concept
inline, block and inline-block
1. Default Width
Inline
Block
Inline-Block
2. Line Break
Inline 1
Inline 2
Inline-Block 1
Inline-Block 2
Block 1
Block 2
3. width and height
Inline 1
Inline 2
Block 1
Block 2
Inline-Block 1
Inline-Block 2
4. padding and margin
padding
Inline 1
Inline 2
Block 1
Block 2
Inline-Block 1
Inline-Block 2
margin
Inline 1
Inline 2
Block 1
Block 2
Inline-Block 1
Inline-Block 2
5. text-align
text-align: center
text-align: right
margin: auto
margin: auto
margin-left: auto
Nesting
Inline Element
Inline Parent
Inline Child
Block Child
Inline-Block Child
Block Element
Block Parent
Inline Child
Block Child
Inline-Block Child
Inline-Block Element
Inline-Block Parent
Inline Child
Block Child
Inline-Block Child
display: none
Original
Display: none for Green
