search

Home  >  Article  >  Web Front-end  >  Relative length units in CSS

Relative length units in CSS

WBOY
WBOYforward
2023-08-26 20:57:031268browse

In CSS, relative length units are used to specify the length relative to another length attribute.

##8##9%Example
Serial number Unit and description
1 em

Relative to the font size of the element, that is, 4em means 4 times the current font size.

2 ex

x-height relative to the current font
3 ch

Width relative to 0
4 rem

Font size relative to the root element
5 vw

1% relative to the viewport width*
6 vh

1% relative to the viewport height*
7 vmin

1% of the smaller size relative to the viewport*
vmax1% of the larger size relative to the viewport*
Relative to parent element

Let’s see An example of using relative length units:

Demonstration 

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Output

CSS 中的相对长度单位Example

Now let’s look at another An example −

Real-time demonstration

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 4ch;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Output

The above is the detailed content of Relative length units in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Set the width of the box using CSSNext article：Set the width of the box using CSS

Related articles

See more