1

Имеются два одинаковых раздела, состоящие из заголовка, псевдоэлемента к этому заголовку и абзаца. Если задать внешний отступ, то линии начинают визуально отличаться.
Вот:
введите сюда описание изображения

*{
  margin: 0;
  padding: 0;
}
/*------------------------*/
.block-1{
  padding: 108px 0;
  text-align: center;
}
.block-1 h2{
  color: #212121;
}
.block-1 h2::after{
  content: "";
  display: block;
  margin: 29px auto 0 auto;
  height: 2px;
  width: 64px;
  background-color: #ff9142;
}
.block-1 p{
  margin: 30px 0 0 0;
  }

/*-------------------------*/
.block-2{
  background-color: #f5f5f5;
  padding: 108px 0;
  text-align: center;
}
.block-2 h2{
  color:  #000;
}
.block-2 h2::after{
    content: "";
    display: block;
    margin: 30px auto 0 auto;
    height: 2px;
    width: 64px;
    background-color: #ff9142;
}
.block-2 p{margin: 30px 0 0 0;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href='test.css'>
<title>TEST</title>
</head>
<body>
  
<div class="block-1">
  <div class="container">
    <h2>Why this is awesome</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<div class="block-2">
  <div class="container">
    <h2>Why this is awesome</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

</body>
</html>

9
  • В чем именно заключается "некорректность"? Вроде все правильно и ожидаемо в таком результате добавления маржина.
    – yar85
    24 июл 2021 в 13:50
  • Если ты о проделках субпиксельного рендеринга, из-за которого линия визуально тоньше становится - то это надо конкретизировать в вопросе... Да и если не об этом, вопрос в любом случае надо дополнить более точным указанием на проблему.
    – yar85
    24 июл 2021 в 14:01
  • @yar85 Да, проблема заключается в том, что визуально линия становится тоньше. Именно это я подразумевал под "некорректностью" 24 июл 2021 в 15:23
  • С субпиксельным рендером ничего поделать не получится. Можно только подобрать значения, которые будут лучше выглядеть.
    – nazarpunk
    24 июл 2021 в 15:27
  • Спасибо за объяснение 24 июл 2021 в 15:32

1 ответ 1

0

Похоже что использование border вместо background для создания линий подчеркивания заголовка, в данном случае - устраняет визуальные различия (из-за субпиксельного рендеринга) между сдвинутыми и несдвинутыми псевдоэлементами. Включая случаи масштабирования документа "вверх".

* { margin: 0; padding: 0; }
 /*-------------------------*/
.block-1    { padding: 50px 0; text-align: center; }
.block-1 p  { margin: 30px 0 0 0; }
.block-1 h2 { color: #212121; }
/*-------------------------*/
.block-2    { padding: 50px 0; text-align: center; background-color: #f5f5f5; }
.block-2 p  { margin: 30px 0 0 0; }
.block-2 h2 { color: #000; }
/*-------------------------*/
.block-1 h2::after,
.block-2 h2::after {
  content: "";
  display: block;
  margin: 0 auto;
  height: 0;                        /* ◄◄◄ */
  width: 64px;
  border-bottom: 2px solid #ff9142; /* ◄◄◄ */
}

.block-2 h2::after { margin-top: 30px; }
<div class="block-1">
  <div class="container">
    <h2>Why this is awesome</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<div class="block-2">
  <div class="container">
    <h2>Why this is awesome</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

📽 GIF демо

Просьба опровергнуть решение, если оно не помогает (указав браузер в котором проблема все же осталась) в комментариях к ответу... я проверил только в Chrome для Linux.


// Для проверки масштабирования примера, его надо развернуть на всю страницу после нажатия кнопки "Выполнить код".

1
  • 1
    Спасибо большое, все работает (Chrome, FireFox, Edge, Yandex - на Windows, остальные не проверял ) 24 июл 2021 в 19:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.