Как убрать лишний отступ в заголовке?
На фото ниже есть 2 заголовка h2 и h1, в есть лишний отступ и я не знаю как его убрать без жёсткого позиционирования
В блоке есть паддинг в 40px
Вот код:
<!-- HTML --> <section> <div class="wrapper row"> <div class="main-text col-md-6"> <h2 class="text-left">Be good</h2> <h1 class="text-left text-uppercase">Be good</h1> </div> </div> </section> |
<!-- HTML --> <section> <div class="wrapper row"> <div class="main-text col-md-6"> <h2 class="text-left">Be good</h2> <h1 class="text-left text-uppercase">Be good</h1> </div> </div> </section>
/* CSS */ * { margin: 0; padding: 0; font-family: "Montserrat", sans-serif; color: #1b1d1f; } h1 { font-weight: 700; font-size: 70px; } h2 { font-weight: 700; font-size: 16px; font-family: "Montserrat"; } .wrapper { padding: 50px; background: linear-gradient(270deg, #55ddee 0%, #d9ffff 100%); height: 720px; } .main-text { padding: 40px; background: #ffffff; border-radius: 36px; height: 420px; } |
/* CSS */ * { margin: 0; padding: 0; font-family: "Montserrat", sans-serif; color: #1b1d1f; } h1 { font-weight: 700; font-size: 70px; } h2 { font-weight: 700; font-size: 16px; font-family: "Montserrat"; } .wrapper { padding: 50px; background: linear-gradient(270deg, #55ddee 0%, #d9ffff 100%); height: 720px; } .main-text { padding: 40px; background: #ffffff; border-radius: 36px; height: 420px; }
Дополнительно:
Это не padding, это line-height.
Только не надо его убирать. Попробуйте сделать заголовок в несколько строк и посмотрите что будет с маленьким line-height.
Позиционируйте не жестко, а относительно высоты строки.
Я имею ввиду отступ от левого края, а не от верха или низа, то есть не высоту строки
Интересно, как мы должны были догадаться.
Речь о том, что буквы не вровень получаются?
Компенсируйте отрицательным отступом. Опять же можно в em или других шрифтовых единицах.
Ответы:
h1 {
font-weight: 700;
font-size: 70px;
margin-top: 0;
}
Теперь заголовок h1 не будет иметь верхнего отступа.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы убрать лишний отступ в заголовке, вам необходимо использовать CSS. В зависимости от того, какой именно отступ вас беспокоит (верхний, нижний, правый или левый), вы можете применить соответствующие свойства CSS.
Например, если вас беспокоит верхний отступ в заголовке, вы можете использовать свойство margin-top и установить его значение равным 0. Для этого добавьте следующий CSS код:
h1 { margin-top: 0; }
Если вас беспокоит нижний отступ, вы можете использовать свойство margin-bottom:
h1 { margin-bottom: 0; }
Аналогично, для устранения правого и левого отступов, используйте свойства margin-right и margin-left соответственно.
Если вам нужно убрать отступы со всех сторон, можно воспользоваться сокращенным свойством margin:
h1 { margin: 0; }
Таким образом, применяя подобные CSS правила к вашему заголовку, вы сможете убрать ненужные отступы и достичь желаемого внешнего вида.