Блог

Главная - Вопросы по программированию - Как сделать маржинальное дно в заголовке?

Как сделать маржинальное дно в заголовке?

#html #css #frontend

Вопрос:

Следующий фрагмент кода показывает желаемую позицию моего заголовка в нижнем колонтитуле.

         * {
            box-sizing: border-box;
        }
            /*HEADER*/
        .header{
            overflow: hidden;
            height: 91px;
            background-color: #000000;
            width: 100%;
        }

        .header a {
            color: #34E034;
            text-decoration: none;
        }

        .header a.logo {
            font-family: Wiz;
            font-size: 55px;
            font-weight: bold;
        }


        html, body {
            margin:0;
            padding:0;
        } 
  <div class = "header">
        <div class="header-row">
            <div class="left-main-header">
                <div class="header-box">
                    <div class="new-header">Techwizards</div>
                    <a class="logo"><b>Techwizards</b></a>
                </div>
            </div>
        </div>
    </div>

Если я сейчас захочу добавить стиль шрифта для заголовка. Этот:

 @font-face {
        src: url("fonts/MagicSchoolTwo.ttf");
        font-family: wiz;
    }

У меня нет поля внизу, как на этой картинке.введите описание изображения здесь

Я перепробовал все — поля, отступы, но мне не хватает места внизу. Как я могу это исправить?

Комментарии:

1. В вашем коде нет полей или отступов….

2. Конечно, потому что я удалил его. Если это не работает, почему я должен поместить это в код? Где я должен добавить отступ/поля, чтобы это работало?

3. у вас есть фиксированная высота в заголовке со скрытым переполнением, вероятно, поэтому ваше заполнение не работает

4. Кроме того, если я удалю скрытое переполнение, оно не будет работать.

5. Попробуйте добавить .header { display: flex; align-items: flex-end; } или увеличить высоту строки для .logo.

Ответ №1:

Исправлен Ваш Код:

У вас была абсолютная высота на вашем заголовке. Тогда тег «a» не может иметь поля по умолчанию, вы должны установить его в блоке отображения, чтобы отобразить поле. Я также добавил гибкий дисплей в ваш заголовок, как было предложено в комментариях.

Кодовый набор

 * {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
/*HEADER*/
.header {
  background-color: #000000;
  width: 100%;
  display: flex;
}

.header a {
  color: #34e034;
  text-decoration: none;
}

.header a.logo {
  font-family: Wiz;
  font-size: 55px;
  font-weight: bold;
  display: block;
  margin-bottom: 40px;
} 
 <div class="header">
  <div class="header-row">
    <div class="left-main-header">
      <div class="header-box">
        <div class="new-header">Techwizards</div>
        <a class="logo"><b>Techwizards</b></a>
      </div>
    </div>
  </div>
</div>
Метки: