Бордер. Изменения

Бордер. Изменения


Как сделать прямоугольный бордер, у которого был бы пробел сверху по центру?




Всё очень просто: поднимаете Заголовок, задаёте ему задний фон, боковые внутренние отступы для отступа от полос, и готово.

Есть минус в том, что если заголовок длинный и вдруг захочет встать в две строчки, тогда центрирование заголовка к полоскам собьётся. Но можно либо сделать высоту заголовка, рассчитанную на две строки, либо задать заголовку max-width-90%, например, и дать ему text-overflow: ellipsis что, конечно, не очень хорошо для SEO.

.wrapper-for-border {
  border: 1px solid black;
  padding: 20px;
  margin-top: 20px;
}
h1, p {
  text-align: center;
}

h1 {
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 20px;
  background-color: white;
  display: block;
  width: fit-content;
  background-color: white;
  margin: -35px auto 0;
}
<div class="wrapper-for-border">
  <h1>About Us</h1>
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letras</p>
</div>

 




Report Page