Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the difference between height and line-height?
The height property defines the vertical measurement of an element's content area, while line-height controls the spacing between lines of text within that element.
The height property sets the overall vertical size of a container, such as a div or paragraph. When content exceeds this height, it may overflow or be clipped depending on the overflow settings.
The line-height property specifies the minimum height of line boxes within the element. It determines the vertical space between lines of text, affecting readability and visual spacing. Line-height can be specified in pixels, percentages, or as a unitless number (multiplier of font size).
Syntax
height
element {
height: value;
}
Where value can be −
- auto − The browser calculates the height based on content (default).
-
length − A fixed value in
px,em,rem, etc. - percentage − A percentage of the containing element's height.
line-height
element {
line-height: value;
}
Where value can be −
- normal − The browser sets a default spacing, usually around 1.2 times the font size (default).
-
number − A unitless multiplier of the element's font size (e.g.,
1.5). -
length − A fixed value in
px,em,rem, etc. - percentage − A percentage of the element's font size.
Key Differences
The following table summarizes the key differences between height and line-height −
| Feature | height | line-height |
|---|---|---|
| What it controls | Total vertical size of the element box | Vertical spacing between lines of text |
| Applies to | The element's content area | Each line box inside the element |
| Overflow behavior | Content may be clipped or scroll | No overflow; element grows with lines |
| Common values |
px, %, auto
|
px, %, unitless multiplier (e.g., 1.5) |
| Effect on text | Constrains the container boundary | Adjusts space between text lines |
Visual Representation
The following diagram shows how height and line-height affect an element differently −
Example: Height vs Line-Height
Here is a visual comparison showing how height and line-height affect text display −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid #333;
margin: 10px 0;
padding: 10px;
background-color: #f9f9f9;
}
.height-example {
height: 40px;
background-color: #e3f2fd;
overflow: hidden;
}
.line-height-small {
line-height: 15px;
background-color: #fff3e0;
}
.line-height-large {
line-height: 35px;
background-color: #e8f5e8;
}
.normal-text {
background-color: #fce4ec;
}
</style>
</head>
<body>
<h2>Height Property (40px)</h2>
<div class="container height-example">
This text is in a container with fixed height of 40px.
Notice how the text may get cut off if it exceeds
the container height.
</div>
<h2>Small Line Height (15px)</h2>
<div class="container line-height-small">
This text has a line-height of 15px, making the
lines closer together. Notice how compact the text
appears with reduced spacing between lines.
</div>
<h2>Large Line Height (35px)</h2>
<div class="container line-height-large">
This text has a line-height of 35px, creating more
space between lines. The increased spacing makes the
text more readable but takes up more vertical space.
</div>
<h2>Normal Text (Default)</h2>
<div class="container normal-text">
This is normal text with default line-height and no
height restrictions. The browser determines the
optimal line spacing based on font size.
</div>
</body>
</html>
Understanding the Differences
From the example above, you can observe that −
- Height constrains the container's vertical space, potentially clipping content.
- Line-height adjusts the vertical rhythm and spacing between text lines.
- Small line-height creates condensed text, while large line-height improves readability.
- Height affects the element's boundaries, line-height affects text flow within those boundaries.
Example: Centering Text Vertically Using line-height
A common use of line-height is to vertically center a single line of text inside a fixed-height container by setting line-height equal to height −
<!DOCTYPE html>
<html>
<head>
<style>
.centered-box {
height: 60px;
line-height: 60px;
background-color: #e3f2fd;
border: 2px solid #1565c0;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<div class="centered-box">
This text is vertically centered
</div>
</body>
</html>
In this example, setting both height and line-height to 60px vertically centers the single line of text inside the container. This technique only works for single-line text.
Conclusion
The height property controls the overall vertical size of an element's box, while line-height controls the spacing between lines of text within it. Use height to set fixed container dimensions and line-height to manage text readability and vertical rhythm. Together, they can also be used to vertically center single-line text inside a container.
3K+ Views
