As I venture into exploring the line-height property, I came across information on MDN which stated:
For non-replaced inline elements, it determines the height used in calculating the line box height.
However, in this scenario, when I set the line-height on .one, it impacts the height of all other divs as well. Why is this happening?
Prior to applying the
line-heightproperty to.one:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{ margin: 0; padding: 0; } .container { position: absolute; left: 25%; top: 30%; border: thick solid grey; width: 50vw; line-height: 100px; } .item { width: 100px; height: 100px; margin: 10px; color: white; display: inline-block; border: thick solid black; } #one { background-color: red; color: black; } #two { background-color: green; width: 150px; height: 150px; } #three { background-color: lightblue; width: 50px; height: 50px; } #four { background-color: coral; width: 20px; height: 300px; } #five{ background-color: grey; width: 160px; height: 180px; } </style> </head> <body> <div class="container"> <div id="one" class="item">A</div> <div id="two" class="item">B</div> <div id="three" class="item">C</div> <div id="four" class="item">D</div> <div id="five" class="item">E</div> </div> </body> </html>After setting the
line-heightproperty on.one:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.container {
position: absolute;
left: 25%;
top: 30%;
border: thick solid grey;
width: 50vw;
line-height: 100px;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
color: white;
display: inline-block;
border: thick solid black;
}
#one {
background-color: red;
color: black;
line-height: 200px
}
#two {
background-color: green;
width: 150px;
height: 150px;
}
#three {
background-color: lightblue;
width: 50px;
height: 50px;
}
#four {
background-color: coral;
width: 20px;
height: 300px;
}
#five{
background-color: grey;
width: 160px;
height: 180px;
}
</style>
</head>
<body>
<div class="container">
<div id="one" class="item">A</div>
<div id="two" class="item">B</div>
<div id="three" class="item">C</div>
<div id="four" class="item">D</div>
<div id="five" class="item">E</div>
</div>
<&t/body>
</html>