The concept comes from typography. The baseline is the baseline where the text is set. If you are writing on a lined sheet, the baseline is equivalent to the pattern itself:

Image Source

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

In CSS, the concept is important when dealing with text, and with elements inline in general (including elements with display: inline-block and display: inline-table ). The entire layout process determined by CSS is based on boxes (boxes), and these boxes can be of several types, which is determined by the display property of the element and by the content type. See this example, removed from the 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 }

Thegrayboxesinthefigurearelineboxes(lineboxes).Noticethattheboxincludesthe"legs" of "y", "g" and "p". That is, the box contains the entire line, with the full characters. In the example, each paragraph line generates such a box. These boxes are generated automatically 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
• Can not manipulate line boxes directly with CSS, only indirectly: if the line contains elements inline or inline-block , the line box surrounds these elements completely, so its height can vary according to the height of the content.
• The baseline belongs to the line box.

The following example shows how 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, so it affects the vertical position of the whole line box's baseline (otherwise part of the text would be cut off 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 properties with text, 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 display property of the element. For example, vertical margins do not apply to inline elements, and in them padding protrudes outwards, without affecting container dimensions or baseline position:

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>

On 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:

  

Does an element have any text for the 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 does not make sense if there is no text. For example, if there are two images within a paragraph, they will align at the bottom (the baseline corresponds to the base of the images, but if there is an image and a text, the text may exceed the baseline (remember,