Как правильно сверстать такой элемент?

Question

[kkrieger]

Смущает текст вверху и рамка которая идет от текста идея есть - сделать тексту отрицательный  margin-top что бы поднять его вот ищу более красивый вариант

Answer 1

[Алексей Зуев]

Элемент fieldset предназначен для группирования элементов формы.
Если хотите иметь что-то более семантичное, то добро пожаловать в мой пример без fieldset.

Answer 2

[Юлия Старченко]

можно так:

<fieldset>
  <legend>About us</legend>
  <p>Lorem ipsum...</p>
</fieldset >

Comments

[Юрий Гринёв]

Согласен. Это лучший вариант. Сам таким же методом делал.

[Юлия Старченко]

linakun: ну, не самый лучший, потому как это не очень семантично) просто альтернативный

Answer 3

[Павел]

codepen.io/anon/pen/xGXavj
ну и дальше padding и остальная стилизация

Answer 4

[Евгений Петров]

Промежуток c текстом на уровне рамки блока?
Непосредственно ваш пример с идентичным макетом (внутри ещё пара ссылок на задачи с рамками).

Как грамотно стилизовать h1 средствами CSS?
Просто ещё один вариант с горизонтальными линиями вокруг.