Margins & paddings behaviour

Note: all margins & paddings are set to 20px in this demo
Note: use your chrome inspector to see the margins

1. Blocklevel, unpositioned: vertical margins "collapse" (i.e. the greatest value of touching margins counts)

2. Blocklevel, positioned: horizontal & vertical margins add up

3. Inline: vertical margins are ignored, horizontal margins add up

Lorem ipsum dolor sit amet, consectetur adipisicing elit, dolor in reprehenderit in voluptate velit esse cillum. sed do eiusmod tempor incididunt ut... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Margins & paddings behaviour

1. Blocklevel, unpositioned: vertical margins "collapse" (i.e. the greatest value of touching margins counts)

2. Blocklevel, positioned: horizontal & vertical margins add up

3. Inline: vertical margins are ignored, horizontal margins add up

4. Inline: vertical paddings overlap above, but underlap below