Home > Article > Web Front-end > Detailed explanation of line-height in CSS (code example)

Detailed explanation of line-height in CSS (code example)

云罗郡主Original: 2018-11-30 14:29:232764browse

What determines the height of the element is very helpful for us to solve the page display problem and layout the page. The conventional operation performance is to set the height attribute for a block-level element, then it has a height:

<style>
  .test {
    border: 1px solid #ccc;
    height: 100px;
    width: 100px;
  }
</style>
<body>
  <div class="test"></div>
</body>

But according to common knowledge, when we do not set the height for the element and there is content in the element, the element still gets Reached height:

<style>
  .test {
    border: 1px solid #ccc;
    width: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>

Detailed explanation of line-height in CSS (code example)

Why the div gets the height? It’s not because the text supports the height, but because line-height supports the div. Compare the codes at both ends

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>

The effect is as follows:

Detailed explanation of line-height in CSS (code example)

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 0;
  }
</style>
<body>
  <div class="test">1</div>
</body>

The obvious result is that there is height because of height, and there is no height because of line-height. The more detailed details about height are actually because each line of text has a line box, and these boxes naturally support the height of the parent element.

At the same time, observing the above example, you can find that the center line of the text and the center line of line-height are at the same position, so there is a commonly used centering method:

<style>
  .test {
    line-height: 100px;
    height: 100px;
  }
</style>

Set line -Height and the same value as height can make the text vertically centered

From the results, this is indeed the case, but this sentence is wrong. This sentence has a few extra words. There is no need to set height at all, only line -height can center the text vertically.

The above is the detailed content of Detailed explanation of line-height in CSS (code example). For more information, please follow other related articles on the PHP Chinese website!

css

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the method of creating multiple grid cells (combined cells) in a grid layoutNext article：Introduction to the method of creating multiple grid cells (combined cells) in a grid layout

See more

Detailed explanation of line-height in CSS (code example)

Related articles