Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the difference between height and line-height?
Height is the vertical measurement of the container, for example, height of a div.
Line-height is a CSS property to specify the line height i.e. the distance from the top of the first line of text to the top of the second. It is the space between the lines of two paragraphs.
Example
You can try to run the following code to learn the difference between height and line height:
<!DOCTYPE html>
<html>
<head>
<style>
.height {
height: 20px;
}
.lheight {
line-height: 15px;
}
.lheightbigger {
line-height: 35px;
}
</style>
</head>
<body>
<h2>Height</h2>
<div class="height">
This is demo text. This is demo text.
This is demo text. This is demo text.
This is demo text. This is demo text.
</div>
<h2>Line Height with less space</h2>
<div class="lheight">
This is demo text showing line height example. This is demo text showing line height example.
This is demo text showing line height example. This is demo text showing line height example.
This is demo text showing line height example.This is demo text showing line height example.
</div>
<h2>Normal Text</h2>
<div>
This is normal text.
This is normal text.
This is normal text.
</div>
<h2>Line Height with more space</h2>
<div class="lheightbigger">
This is normal text. This is normal text.This is normal text.
This is normal text. This is normal text.This is normal text.
This is normal text. This is normal text.This is normal text.
</div>
</body>
</html>
Updated on: 08-May-2020
2K+ Views
Advertisements