The role of margins
A margin is a transparent buffer around the box of an element. Except for images, inlineDisplay of an element on a line with other elements. elements behave a little differently: only left and right margins are used, not top and bottom margins.
This example illustrates the phenomenon of collapsing margins: when one element is placed above another, the separation used is the maximum (not the sum) of the bottom margin of the top element and the top margin of the bottom element.
Here, the spacing between each pair of paragraphs is the same, since the maximum of 2 and .5 is the same as the maximum of 2 and 2. The only way you can tell that the second paragraph has a smaller margin is because of the smaller left margin.
Note:
Hints:
- undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
p {
padding: 1rem;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX