Блог

Я настроил демонстрацию моей проблемы по следующему URL: http://jsfiddle.net/YHHg7/4 /

Я пытаюсь сделать следующее:

 legend {
  display: block;
  border-bottom: 1px solid red;
  margin-bottom: 50px;
}
  

Однако, похоже, что все браузеры игнорируют display: block тег легенды. Это правильное поведение для этого тега или я делаю что-то неправильно?

<legend> по умолчанию является элементом уровня блока, поэтому, включаете ли вы display: block , разницы нет. Однако браузеры специально обрабатывают его вместе с <fieldset> как метку для набора полей.

Чтобы «отделить» его от <fieldset> , вы можете придать ему нестатическое положение, или переместить его, или даже просто еще немного поиграть с его полями. Однако результаты могут быть немного непредсказуемыми, опять же из-за особой обработки обоих элементов.

IMO лучшее, что вы можете сделать для управления легендой, — это просто оставить ее только как семантическое средство.

CSS:

 legend {
    display: block;
    margin: 0;
    border: 0;
    padding: 0;
    width: 100%;
}
  

А затем используйте интервал внутри него, чтобы управлять всем желаемым стилем:

HTML:

 <legend><span>Span to the rescue!</span></legend>
  

CSS:

 legend span {
    display: block;
    padding: 0 20px;
    border-bottom: 1px solid red;
}
  

Чистый, семантический и, как правило, легко управляемый в разных браузерах

legend по умолчанию является элементом уровня блока. Если я добавлю ширину обратно при использовании Chrome (канал разработки), ширина легенды будет изменена соответствующим образом.

Если вместо этого вас интересует margin стиль, для a legend можно задать только его левое или правое поля, и это поместит его относительно fieldset its, содержащихся внутри. Если вы хотите добавить интервалы к другим элементам, то вы, вероятно, захотите добавить отступы к fieldset самому.

Раскомментируйте width атрибут, если хотите, чтобы красная линия проходила полностью.

 legend {
  display: block;
  border-bottom: 1px solid red;
  width:100%;
  margin-bottom: 50px;
}