How are the string blocks arranged inside the string container?

Question

How are the string blocks arranged inside the string container?

A question about CSS. If you specify font-size > line-height, for example, font-size: 24px and line-height: 12px, then the half interval will be negative (-6px). I can't imagine the behavior of a string element when its half-spacing is negative.

<p style="font-size: 12px; line-height: 12px;">
    This is text, <em>some of which is emphasized</em>, plus other text<br>
    which is <strong style="font-size: 24px;">strongly emphasized</strong>
    and which is<br>
    larger than the surrounding text.
</p>

In this example, the font-size of most of the text is 12px, whereas the text of one of the string non-placeable elements has the size 24px. However, the line-height value of the entire text is 12px, since line-height is an inherited property. So thus, the line-height element strong is also 12px.

In this example, for anonymous text (which does not lie in a lowercase element) and for italics, the line height is equal to the font height (font-size is equal to line-height, which is equal to 12px). For the strong element, the situation is different.

I don't understand why in this example the row container is 15 pixels high.

How block elements are laid out in the document is clear-from top to bottom rectangles-blocks are placed one under the other. In this case, it is necessary to take into account the margins, borders and margins + floating elements.

But how this happens with the text and text elements inside the block, and they FORM the HEIGHT of the block in most cases-I do not understand. 2. Please explain in detail how the lines are LAID OUT in the document.

The lines have blocks (not block elements, but just blocks) - the content area (content area), the string block (inline box), line container (line box). It is written in Meyer's book that " A line box is the smallest block that covers the top and bottom points of the string blocks that are in the line. In other words, the top edge of the string container is placed along the top of the highest string block, and the bottom coincides with the bottom of the string block located below all of them. " I don't understand how we got the number of 15 pixels in the example above. I don't understand how the string blocks are arranged inside the string container.

Meyer writes in his book, " For each content area, we determine which part of it is above the baseline of the entire line and which part of it is below the baseline. This is not an easy task: the position of the baseline of each element and each piece of anonymous text and the baseline of the line itself must be known, then they must all be lined up in a row. "

What does "whole line baseline" mean? Baseline, as far as I understand, it can only be an anonymous text or string element. And a string is a piece of anonymous text and / or a string element that fits the width of a block container element.

I realized that each row lies in a row container, these containers lie one under the other closely.

19

css css3 веб-дизайн

Author: Vadim Ovchinnikov, 2017-01-25

Source

1 answers

score 19 · Answer 1

Font size is a metaphorical thing. Even if you set line-height:40px; font-size:40px; as in my example, the font height will be larger.

Why? Because by tradition, the font height is calculated from the upper point of a capital letter of the type Н to the lower point of the letter у. It's easy to imagine that the letter Ё will be higher, so the fonts reserve a little more space for themselves.

Separate the string element and the block element in your mind: they are different features.

See the example: The height of the div block element corresponds to line-height, but the string element is slightly larger, it corresponds to the actual font height.

div {
  background: #ccc;
  line-height: 40px;
  font-size: 40px;
}

span {
  background: rgba(0, 0, 0, 0.2);
}

<div><span>Some text уЁ</span></div>

What happens when you need to stack the rows one above the other? Uses line-height, even if the row heights overlap:

div {
  background: #ccc;
  line-height: 40px;
  font-size: 40px;
}

span {
  background: rgba(0, 0, 0, 0.2);
}

<div><span>Строки накладываются друг на друга, невзирая на высоту</span></div>

The height of the block consists of line-height х количество строк + padding. Even if line-height = 0, string height the number of elements does not affect anything, and the rows merge into one:

div {
  background: #ccc;
  line-height: 0;
  font-size: 40px;
}

span {
  background: rgba(0, 0, 0, 0.2);
}

<div><span>Строки накладываются друг на друга, невзирая на высоту</span></div>

What is the baseline? This is a line running along the lower border of letters that do not have hanging elements:

It is easy to see the base line, just position the line element along this line (vertical-align: baseline)

div {
  font-size: 40px;
}

span {
  display: inline-block;
  border-bottom: 1px dotted red;
  width: 70px;
  vertical-align: baseline
}

<div>Ёнудл <span></span></div>

UPD

If there are, for example, two span elements in one row, you have everyone given your vertical-align, how do they line up?

What is the baseline of the ENTIRE string

By default, inline blocks are arranged in height so that their baseline matches.

div {
  font-size: 20px;
  line-height: 30px;
  border: 1px solid blue;
}

span {
  background: rgba(0, 0, 0, 0.2)
}

<div>
  <span>Обычный</span>
  <span style="font-size:30px">Большой</span>
</div>

If we use vertical-align: top or bottom, the elements are nailed to the top or bottom edge of the row. But we need to know that if the line-height of the inline block is equal to the line-height of the string, then this will not affect anything, since the upper and lower bounds of the blocks and so they match. In addition, if the line-height inline block is larger, then the line-height row will also increase:

div {
  font-size: 20px;
  line-height: 30px;
  border: 1px solid blue;
}

span {
  background: rgba(0, 0, 0, 0.2)
}

span line-height: 20px:
<div>
  <span style="vertical-align:top; line-height: 20px;">Верх</span>
  <span style="vertical-align:bottom; line-height: 20px;">Низ</span>
</div>
span line-height: 30px (= line-height контейнера):
<div>
  <span style="vertical-align:top; line-height: 30px;">Верх</span>
  <span style="vertical-align:bottom; line-height: 30px;">Низ</span>
</div>
span line-height: 0px:
<div>
  <span style="vertical-align:top; line-height: 0px;">Верх</span>
  <span style="vertical-align:bottom; line-height: 0px;">Низ</span>
</div>
span line-height: 60px:
<div>
  <span style="vertical-align:top; line-height: 60px;">Верх</span>
  <span style="vertical-align:bottom; line-height: 60px;">Низ</span>
</div>

As you can see, in the examples, line-height again plays a role, and not the height of the text itself in the block. The height of the text is actually only needed for one thing – to draw the selection of letters, and of course, if we specify line-height as a relative value (for example, 1.5 or 150%).