Posted by Jukka K. Korpela on 12/29/54 11:44

Toby Inkster wrote:

> The vertical gap between the two paragraphs is the sum of the lengths of
> the following CSS properties as applied to the paragraphs in question:

Nope.

I'm not worried about the OP, who clearly has no idea of what he is
doing and no desire to clarify it, but I'm worried about others who
might be reading this thread.

> padding-bottom of the top paragraph
> border-bottom of the top paragraph
> margin-bottom of the top paragraph
> margin-top of the bottom paragraph
> border-top of the bottom paragraph
> padding-top of the bottom paragraph

Vertical margins "collapse", i.e. margin-bottom and margin-top are not
added but the _larger_ of them is used. This is essential, because the
common browser defaults for p elements set margins (and no padding and
no border), corresponding e.g. to
p { margin: 1.12em 0; }
with the nonzero value (setting top margin and bottom margin) typically
adjusted to match the line-height value in the browser's default style
sheet. This does _not_ create 1.12em + 1.12em spacing between paragraphs
but just 1.12em spacing.

Moreover, the _visual_ gap between the lowest point in the text of the
first paragraph and the highest point in the text of the second
paragraph is somewhat larger than people will expect from the above
considerations. First, the font design, or the actual characters
appearing in the text, may not utilize the full height of the font.
(Consider a row of x's with another row of x's under it. There's
considerable vertical space between the x glyphs even if all paddings,
borders, and margins are zero.) Second, the line-height value may create
some spacing, and typically does; typical default values range from 1.1
to 1.2

[Back to original message]