Detailed explanation of CSS line-height and height
|
Recently, when I was working on CSS interfaces, I often encountered the two attributes of line-height and height. I never really understood them. Today, I took the time to look them up online and I have some understanding of them. https://blog.csdn.net/a2013126370/article/details/82786681 This blogger wrote very well. At least it gave me a deeper understanding of line-height and height. It is worth learning from. 1. Some basic concepts 1. Line height refers to the vertical distance between the baselines of text lines (also called line spacing) 2. Line spacing is the distance between the bottom line of the previous line and the top line of the next line
From my personal understanding, we can draw the following conclusions: 1. When the height attribute of div is not set, the height of div changes according to the size of line-height and is not affected by font-size. 2. Height is used to set the height of elements, such as the height of img, the height of div, etc. The line-height property is used to set line spacing (line height), and the two are not the same concept. 2. Code Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sdds</title>
<style>
html,body,div{
margin: 0;
padding: 0;
border: 0;
}
.bg0{
width: 200px;
height: 45px;
line-height: 100px;
background-color: red;
font-size: 10px;
word-wrap:break-word;
}
.bg1{
width: 200px;
height: 10px;
background-color: green;
}
.bg2{
width: 200px;
height: 45px;
background-color: yellow;
}
.bg3{
width: 200px;
height: 55px;
background-color: blue;
}
</style>
</head>
<body>
<div class="bg0">Shanghai University (SHU) is a 211 university</div>
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
</body>
</html>Running results:
Conclusion: It can be seen that the sum of the heights of the yellow background div and the blue background div is the line-height=100px set for the div with class name bg0, and the height=45px set for the first part of the red div is obtained by subtracting fontsize from line-height and dividing by 2, that is, (100-10)/2=45px. The above is a detailed explanation of CSS line-height and height. For more information about CSS line-height and height, please pay attention to other related articles on 123WORDPRESS.COM! |
<<: Teach you how to use AWS server resources for free
>>: Use PS to create an xhtml+css website homepage in two minutes
Recommend
Understanding of web design layout
<br />A contradiction arises. In small works...
How to build DockerHub yourself
The Docker Hub we used earlier is provided by Doc...
js+canvas realizes code rain effect
This article shares the specific code of js+canva...
How to install JDK8 on Windows
1. Download: http://www.oracle.com/technetwork/ja...
Zabbix implements monitoring of multiple mysql processes
Three MySQL instance processes are started on one...
Introduction to using Unicode characters in web pages (&#,\u, etc.)
The earliest computers could only use ASCII chara...
Introduction to HTML Chinese Character Encoding Standard
In HTML, you need to specify the encoding used by...
How to center the entire page content so that the height can adapt to the content and automatically expand
How to center the entire page content and how to m...
HTML hyperlinks explained in detail
Hyperlink Hyperlinks are the most frequently used ...
Vue interpretation of responsive principle source code analysis
Table of contents initialization initState() init...
How to install Docker and configure Alibaba Cloud Image Accelerator
Docker Installation There is no need to talk abou...
Implementing countdown effect with javascript
Use Javascript to achieve the countdown effect, f...
Detailed explanation of how to install MySQL on Alibaba Cloud
As a lightweight open source database, MySQL is w...
Teach you how to implement Vue3 Reactivity
Table of contents Preface start A little thought ...
jQuery implements all shopping cart functions
Table of contents 1. Select All 2. Increase or de...