In-depth understanding of the vertical-align property and baseline issues in CSS

vertical-align attribute is mainly used to change the alignment of inline elements. It has a great impact on the inline layout. If we don’t understand it, it is easy to make mistakes when developing and adjusting the style.

The principle of this property is very complicated on the Internet, and it is daunting at first glance. It is not necessary to fully understand its principle. As long as we understand its rules, we can use it. Here I share my understanding with you:

Baseline

To understand vertical-align屬, you must understand the baseline. How do you understand the baseline?

1. We write web pages on a rectangular display screen, often laying them out line by line. Inevitably, there will be multiple contents in one line, so how do we align the contents of this line up and down? The answer is to align their baselines by default.

2. Various fonts, pictures, inline HTML elements and other displayable contents have their own baselines. To know the baseline of specific content, we can find a simple reference: the lowercase letter "x". Why find it? Because the baseline of English letters happens to be at the bottom of the lowercase "x", it is easier to see.

Knowing the above two points, we can easily determine the baseline position of other content elements. We can see it at a glance by putting other elements and the lowercase "x" on a line:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      border: 1px solid cyan;
      font-size: 30px;
    }
    div .span1 {
      display: inline-block;
      background-color: green;
    }
    div .span2 {
      display: inline-block;
      overflow: hidden;
      background-color: green;
    }
  </style>
</head>
<body>
  <div>
    x
    <img src="./demo.jpg" alt="">
    Chinese characters <input type="text">
    <button>Button</button>
    <span class="span1">span1</span>
    <span class="span2">span2</span>
  </div>
</body>
</html>

As shown in the figure above, red is the baseline of the elements in this row. It can be found that the baseline positions of images and elements with overflow:hidden style are at the bottom, and the baseline positions of Chinese, input boxes and button are all in the lower middle position. It can be seen that the arrangement of these inline elements is to align the baseline up and down first, and then expand the parent element.

One thing worth noting is that if we put an image directly into the div, we will find that there is a gap between the bottom of the image and the bottom of the div; this is because after the baselines of the inline elements are aligned, they must be consistent with the font baseline of the parent element. In other words: the baseline of each inline element must be aligned with the font baseline of the parent element. However, when the line height and font size style of the parent element change, the font baseline position of the parent element will change, causing the position of the elements within the line to move up and down as a whole. Although we only see an image and no text, the parent element has a default line-height and font-size , which will quietly affect the layout. You will find that a lowercase "x" is placed in the div, as shown in the figure below, and its bottom just occupies the gap. So knowing this reason, if you want to remove this gap, you only need to set line-height and font-size of the parent element to 0, or set the image to a block-level element and let it occupy a line alone. Similarly, if an input box is placed directly in the div, there will be a gap above the input box. It is similar to this, but the baseline position of the image and the input box is different.

vertical-align Property

After understanding the above inline element sorting principles, we may have a question: what if we need some inline elements not to be arranged according to the baseline? The answer is to use vertical-align property.

First of all, the vertical-align property is only effective for inline elements. It changes the alignment between the font of the current inline element and the parent element. The default value is baseline , that is, the baselines of the two are aligned, as we tested above.

For more information about the attribute values, please refer to https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align. You can simply add a lowercase "x" and an image to the div to switch the attributes for verification.

There are two properties to explain briefly:

1. When the attribute is set to "%", it refers to the proportion of the line-height attribute value of the current inline element. It can be set to a positive or negative value. The baseline of the inline element moves up or down by this percentage relative to the font baseline of the parent element. As shown below, set the image vertical-align: 50%; line-height: 30px ; the bottom of the image should be aligned with the bottom of the "x", but now it has moved up 15px. If it is -50%, it will move down 15px. Of course, you can also set it directly to length，vertical-align：15px; the effect is the same.

2. When the attribute is set to "middle", the middle position of the inline element will be aligned with the 1/2 "x-height" position above the parent element's font baseline. "x-height" is actually the height of the lowercase letter "x" in the parent element. In simple terms, the middle position of the inline element will be aligned with the middle position of the lowercase letter "x" in the parent element (the intersection of the x), which is equivalent to aligning the middle of the two.

Summarize

This is the end of this article about in-depth understanding of the vertical-align property and baseline issues in CSS. For more relevant CSS vertical-align property and baseline content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: MySQL in Windows net start mysql Start MySQL service error occurs System error solution

>>: Analysis and explanation of the differences between DIV, Table and XHTML website building