CSS em
CSS em
In CSS, the em unit is a relative unit, which is calculated relative to the font size of the parent element. In this article, we will detail the application of the em unit in CSS and how to use it to achieve various effects.
1. What is the em unit
In CSS, the em unit is a relative unit, which is calculated relative to the font size of the parent element. For example, if the parent element’s font size is 16px, then 1em equals 16px. If the child element’s font size is 0.5em, its font size is half that of the parent element.
2. Using the em Unit
2.1 Setting Font Size
Using the em unit makes it easy to set font sizes and allows for responsive design. For example, we can set the font size of all headings to 1.5em, so that their size changes based on the parent element’s font size.
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
p {
font-size: 1em;
}
2.2 Setting Element Width and Height
In addition to font size, the em unit can also be used to set element width and height. For example, we can set the width of a div element to 2em, which will make its width twice the font size of its parent element.
div {
width: 2em;
height: 1.5em;
}
2.3 Setting Padding and Margins
The em unit can also be used to set padding and margins. For example, we can set the padding of a div element to 0.5em, so that its padding is half the font size of the parent element.
div {
padding: 0.5em;
margin: 1em;
}
3. Notes on the em unit
When using the em unit, please note the following:
emunits are calculated relative to the font size of the parent element, so there may be a cumulative effect on nested elements.- If the parent element doesn’t have a font size set, the
emunit will inherit the font size of the parent element until it finds an element with a set font size. - In responsive design, you can use the
emunit to achieve adaptive adjustment of font sizes and element sizes.
4. Sample Code
4.1 Setting Font Size
<!DOCTYPE html>
<html Tutorial">html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em css</title>
<style>
h1 {
font-size: 2em;
}
p {
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>em css</h1>
<p>Welcome to geek-docs.com</p>
</body>
</html>
Output:
4.2 Setting the Width and Height of Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em css</title>
<style>
div {
width: 3em;
height: 2em;
background-color: lightblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Output:
4.3 Set padding and margins
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em css</title>
<style>
div {
padding: 0.5em;
margin: 1em;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>geek-docs.com</div>
</body>
</html>
Output:
Conclusion
In CSS, the em unit is a very useful relative unit that can be used to set font size, element size, padding, margins, and more. By using the em unit wisely, we can achieve more flexible and responsive design effects.