Лучший способ создать заголовок с текстом, касаясь верхней и нижней границы

Я хочу создать заголовок на весь экран с простым текстом-логотипом . Задача состоит в том, чтобы сделать его касаясь верхней и нижней границы контейнера, как так
(…а также это вариации в половину высоты).

Во-первых, я заметил, что в HTML есть своего рода шрифт-построить верхнее и нижнее поле, которое предотвращает верхние и нижние границы контейнера от прикосновения текста. Чтобы исправить это, я использовал line-heightсвойство (с угадыванием его правильного значения…).

Я закончил так: https://jsfiddle.net/2ukfc8e7/8/

Есть ли лучшее решение?

2 ответа

  1. Обновить:

    body {
      padding: 0;
      margin: 0;
    }
    div {
      font-family: 'Open Sans', sans-serif;
      font-size: 48px;
      background-color: gray;
      color: white;
      border: 0;
      padding: 0;
      margin: 0;
      height: 34px;
      line-height: 30px;
    }
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    
    <div>
      <b>ABOF</b>
    </div>

  2. Как оказалось, нет лучшего решения, чем моя оригинальная идея.

    Каждая строка текста внутри тега имеет определенное горизонтальное и вертикальное пространство,которое не следует путать со marginpaddingсвойством/. Мы можем определить это пространство с помощью line-heightсвойства. Убавляя его значение, мы делаем так, чтобы верхняя и нижняя границы сближались друг с другом — и — со строкой текста.

    Я сделал фрагмент (ниже) с line-heightпереходом свойств, чтобы показать описанный подход (в fancy slow-mo action).

    /* RESET */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Roboto';
    }
    
    p {
      font-weight: normal;
    }
    
    header {
      line-height: 1.5;
      font-size: 2rem;
      
      /* Irrelevant part */
      font-weight: 900;
      color: white;
      background-color: gray;
      overflow: hidden;
     
      /* Transition stuff*/
      transition-property: line-height;
      transition-duration: .5s;
    }
    header:hover {
      line-height: .67;
    }
    <link href='https://fonts.googleapis.com/css?family=Roboto:900,400' rel='stylesheet' type='text/css'>
    
    <body>
      <p>Hover header below to see transition from <b>'line-height: 1'</b> to <b>'line-height: 0.67'</b>
      </p>
      <header>ABOF</header>
    </body>