line-height in CSS - html

Question

I have a bit of clarification regarding line-height in css .I tried the following code:
.red {
line-height: 4.1;
border: solid red;
}
.box {
width: 18em;
display: block;
vertical-align: top;
font-size: 15px;
}
<div class="box red">
<div>Avoid unexpected results by using unit-less line-height</div>
length and percentage line-heights have poor inheritance behaviour ...
</div>
In the example above , I havent used display:inline or display:inline-block ,but still I am able to see the spacing between the text .Why is it?
Also , I have one more clarification : when I apply line-height : 25em; on an inline-block element say <div style="display:inline-block;line-height : 25em;"></div> ,
will the space occupy on top and bottom of this element with respect to its parent or the spacing will occur for the inline elements of its children?

Answer 1

In the example above , I havent used display:inline or
display:inline-block ,but still I am able to see the spacing between
the text .Why is it?
An element inherit line-height from its parent, no matter it is an inline/inline-block/block, but as you can see below, a block element behaves different than an inline, where the block element itself is not affected (no space between the div elements) but its content is.
body {
line-height: 4;
}
div, span {
background: lightblue;
}
div + div, span + span {
background: lightgreen;
line-height: 3;
}
div + div + div {
background: lightgray;
line-height: 2.5;
}
<span>
This is a sample text inside a span element<br>
that has a line break making this come in 2 lines
</span>
<span>
This is a sample text inside a span element
</span>
<div>
This is a sample text inside a div element<br>
that has a line break making this come in 2 lines
</div>
<div>
This is a sample text inside a div element
</div>
<div>
<span>
This is a sample text inside a span element<br>
that has a line break making this come in 2 lines
</span>
<span>
This is a sample text inside a span element
</span>
<div>
When I apply line-height : 25em; on an inline-block element say <div
style="display:inline-block;line-height : 25em;"></div> , will the
space occupy on top and bottom of this element with respect to its
parent or the spacing will occur for the inline elements of its
children?
For its children
div:nth-child(2) {
display: inline-block;
line-height: 4;
background: lightgreen;
}
div:nth-child(1),
div:nth-child(3) {
background: lightblue;
}
<div>
This is a sample text displayed as block
</div>
<div>
This is a sample text displayed as inline-block
</div>
<div>
This is a sample text displayed as block
</div>

Answer 2

Line height gives the line the text is sitting on a height value. Think of it as when writing in a notepad. When changing the line heights, you are changing the distance between the lines regardless of whether the sentence overflows onto the next line.
If you are trying to achieve a gap between sentences, separate them with "p" tags and then add padding and or margin to your tags.
.p { margin: 10px 0; }
.p { padding: 10px 0px; }

Answer 3

Hello i think the problem in not for line height. I think the main problem is -
width:18em;
Be clear about em. Basically em depends on its parents value. Read this carefully. I think your problem will be solved. If you still face problem then use -
width:100%;