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

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

云罗郡主
Release: 2018-11-30 16:28:36
Original
2800 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template