I am experimenting with the line-height property, and read from MDN that:
On non-replaced inline elements, it specifies the height that is used to calculate line box height.
However, in the case below, I set the line-height on .one but it is affecting the height of all other divs as well. Why is this happening?
Before setting the line-height property 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-height property 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>
</body>
</html>The line-height is affecting all other siblings becuase they have display: inline-block applied to them, meaning they should be 'inline' with each other.
When setting a line-height it's increasing the line height for all elements sharing the same line; if you were to change your .item css display property to a block level element you will notice the line height will then not affect it's siblings as they don't share the same 'line'.