CSS - высота<p>с отступом 0

Учитывая следующий HTML, какова общая высота <p> элемент? Я думаю, что это будет 1em, но это не так. Буквы, которые опускаются ниже базовой линии, похоже, находятся на некотором поле, которое простирается ниже высоты шрифта.

<html>
  <head>
    <style>
      p {
        margin: 0;
        padding: 0;
        font-size: 1em;
        font-family: serif;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum.</p>
  </body>
</html>

1 ответ

Решение

Высота <p> тег не обязательно будет таким же, как размер шрифта, потому что каждый шрифт имеет встроенную высоту строки. Если вам нужно <p> Чтобы указать конкретную высоту, вам нужно указать ее с помощью свойства height или line-height.

Другое преимущество использования line-height заключается в том, что вы можете использовать его вместе с выравниванием по вертикали для вертикального позиционирования текста.

Другие вопросы по тегам