высота строки в CSS

Question

У меня есть немного разъяснений относительно line-height в css .Я пробовал следующий код:

.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>

В приведенном выше примере, я использовал display:inline нету или display:inline-block, но все же я могу видеть промежуток между текстом. Почему?

Кроме того, у меня есть еще одно уточнение: когда я применяю line-height : 25em; на inline-block элемент сказать <div style="display:inline-block;line-height : 25em;"></div>, будет пространство занимают на верхней и нижней этого элемента относительно его родителя или распорного будет для встроенных элементов его детей?

Answer 1

В приведенном выше примере, я гавань используемого дисплея: встроенный или дисплея: встроенный блок, но все-таки я могу видеть, расстояние между текстом .Why это?

Элемент наследует line-height от своего родителя, независимо от того, это inline/inline-block/block, но как вы можете видеть ниже, block элемент ведет себя иначе, чем в inline, где сам block элемент не влияет (нет места между элементами div), но его содержимое.

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>

Когда я применяю высоту строки: 25em; на встроенном блочном элементе скажем <div style="display:inline-block;line-height : 25em;"></div>, будет ли занимать пространство сверху и снизу этого элемента относительно его родителя или будет происходить интервал для встроенных элементов его дочерних элементов ?

Для своих детей

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

Высота строки дает строке текст сидит на высоте. Подумайте об этом, как при написании в блокноте. При изменении высоты линии вы меняете расстояние между линиями независимо от того, переполняется ли предложение на следующую строку.

Если вы пытаетесь достичь разрыва между предложениями, отделите их тегами «p», а затем добавьте отступы и поля к вашим тегам.

.p { margin: 10px 0; } 
.p { padding: 10px 0px; } 

Answer 3

Привет, я думаю, проблема не в высоте линии. Я думаю, что главная проблема -

ширина: 18м;

Будьте предельно ясны о em. В основном их зависит от ценности его родителей. Прочтите это внимательно. Я думаю, ваша проблема будет решена. Если вы все еще сталкиваетесь с проблемой, используйте -

ширина: 100%;