What is the baseline?

Question

Studying Flexbox (layout type in HTML/CSS), I came across this concept of baseline, I’ve never seen before:

align-items

...

...

• baseline: items are aligned so that their baselines line up

Looking around, I saw that this is not something new from Flexbox, but already used in other contexts, such as vertical-align:

baseline Aligns the baseline of the element with the baseline of your Parent. The baseline of some replaced elements, such as <textarea>, is not specified by the HTML specification, which means that your behavior with that keyword may change from a browser to another.

etc. However, I did not find at first glance any explanation of what is that baseline. It seems to me to have something to do with typography, with the way the letters are arranged in relation to each other. But I’m not sure. I am interested to know specifically how this concept works in an HTML/CSS context:

• Where is this baseline, and what its relationship to other box features (margin, padding, etc) and the text (font-size, line-height, etc.)?
• An element needs to have some text for the baseline exist/make sense?
• What is the practical importance of it? I imagine it is important, since it is the standard value for vertical-align... There are specific situations where your use is desirable/undesirable?

Answer 1

The concept really comes from typography. A baseline is the baseline where the text is based. If you are writing on a lined sheet, the baseline is equal to the agenda itself:

^{Image source}

In the figure you can see that it is not the lower limit of the area occupied by the text, since the descendants letters (such as "leg" of "p") are below the baseline.

In CSS, the concept is important when dealing with text, and elements inline in general (including items with display: inline-block and display: inline-table). The entire layout process determined by CSS is case-based (pits), and these boxes can be of various types, which is determined by the property display element and content type. See this example, taken from CSS3 specification:

<p>Somebody whose name I have
forgotten, said, long ago: <q>a box is
a box,</q> and he probably meant it.</p>

p { display: block }
q { display: block; margin: 1em }

The boxes with gray background of the figure are line boxes (line boxes). Note that the box includes the "legs" of "y", "g" and "p". That is, the box contains the whole line, with the full characters. In the example, each line in the paragraph generates a box like this. These boxes are automatically generated by the browser when processing the content that will be rendered, and obey the following principles:

• There is only one line box per line of text
• Cannot handle line boxes directly with CSS, only indirectly: if the line contains elements inline or inline-block, the line box wraps these elements completely, so their height may vary according to the height of the content.
• The baseline belongs to the row box.

The following example shows how the line content can influence the height of the box and the position of the baseline. The middle word has a font size five times larger than the text around it, and so affects the vertical position of the baseline of the whole row box (otherwise part of the text would be cut or misaligned):

p { border: 1px solid red; }
span { font-size: 5em; }

<p>Lorem <span>ipsum</span> dolor</p>

The same type of consequence exists for other text properties, such as line-height (which is the spacing between multiple line boxes in the same context). Margins and padding may or may not influence the baseline position, depending on the property display element. For example, vertical margins do not apply to elements inline, and in them the padding projects outwards, without affecting the container dimensions or the position of the baseline:

p { border: 1px solid red; }
span { 
    padding: 2em 0;
    margin: 2em 0; /* não faz nada */
    background: yellow;
}

<p>Lorem <span>ipsum</span> dolor</p>

Already in the elements inline-block these properties (and also height) affect the line:

p { border: 1px solid red; }
span { 
    display: inline-block;
    padding: 2em 0;
    margin: 2em 0;
    background: yellow;
}

<p>Lorem <span>ipsum</span> dolor</p>

Trying to answer your final questions:

An element must have some text for baseline to exist/make sense?

There must be a line box, and the line boxes are generated by any inline content within a block. But the concept makes no sense if there is no text. For example, if within a paragraph there are two images, they will align below (the baseline corresponds to the base of the images. However, if there is an image and text, the text may exceed the baseline (remember the leg of the "p"), so a part of it will be below the end of the image.

What is the practical importance of it? I imagine it is important, since it is the standard value for vertical-align...

The key is to understand that the vertical-align refers to how the within the same row box align vertically with each other. For example, the inline block below has 3 own line boxes, but is contained in a more external line box. His baseline (the last line of the block) determines the baseline of the entire outboard box.

p { border: 1px solid red; }
span { 
    display: inline-block;
    background: yellow;
}

<p>Lorem <span>ipsum<br>ipsum<br>ipsum</span> dolor</p>