пустая строка в стр. высота строки не работает - PullRequest
Новая
       22

пустая строка в стр. высота строки не работает

0 голосов
/ 11 января 2020

Я пытаюсь добавить пустое пространство между строками в заголовке html: я действительно не могу понять, где моя проблема ... :-( html: 

.col1 {
  width: 10%;
  border: 1px solid red;
  display: inline-block;
}

.col2 {
  padding: 20px;
  width: 70%;
  border: 1px solid green;
  display: inline-block;
}

.col3 {
  width: 10%;
  border: 1px solid blue;
  display: inline-block;
}

.title {
  background-color: orange;
  font-size: 34px;
  line-height: 50px;
}
<div class=col1>a</div>
<div class=col2>
  <h2>
    <p class=title>
      long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg,
    </p>
  </h2>
</div>
<div class=col3>a</div>

https://jsfiddle.net/uvkqt7wj/

Спасибо за вашу драгоценную помощь

Ответы [ 2 ]

0 голосов
/ 11 января 2020

Если вы установите значение высоты линии на , кратное значению font-size, тогда вы получите то, что я думаю из вашего вопроса, - это желаемая высота конечной точки ,

Таким образом, ваш размер шрифта составляет 34 пикселя. Это line-height: 1, поэтому для добавления пробела размером 34 пикселя у вас есть line-height: 2 (вдвое больше размера шрифта).

Здесь можно задать любое цифровое значение без единицы, например line-height 1.5 (34px + (34px / 2)).

Я полагаю, что вот что вы пытаетесь достичь с помощью своего вопроса. Пожалуйста, дайте мне знать, если я вас неправильно понял, и уточню ваш вопрос. 

.col1 {
  width: 10%;
  border: 1px solid red;
  display: inline-block;
}

.col2 {
  padding: 20px;
  width: 70%;
  border: 1px solid green;
  display: inline-block;
}

.col3 {
  width: 10%;
  border: 1px solid blue;
  display: inline-block;
}

.title {
  background-color: orange;
  font-size: 34px;
  line-height: 2;
}
<div class=col1>a</div>
<div class=col2>
  <h2>
    <p class=title>
      long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg,
    </p>
  </h2>
</div>
<div class=col3>a</div>

Эта статья о том, как на самом деле работает CSS Line-height, также стоит прочитать

0 голосов
/ 11 января 2020

ваш код полностью правильный, за исключением того свойства line-height css. Вы не можете дать это в пикселях. Значение свойства line-height должно быть введено без 'px'. просто напишите:

Ваш код: 

line-height:60px;

Конвертируйте его в: 

line-height:6;

Здесь Вы Go: 

.title{
    background-color:orange;
    font-size:34px;
    line-height:3;
}
  • Примечание не вводите, сохраняйте меньшее значение
...