UI2 CSS: .fields .fields-group + .heading Есть решение

1

Мне кажется, что в данной комбинации у .heading margin-top лишний. Потому, что у `.fields .fields-group` есть правило `margin-top: 2rem`, и у `.fields .heading` есть тоже правило `margin: 2rem 0 0`. Когда пытаешься сделать заголовок для раздела полей ввода получается не очень гармонично :)

<fieldset class="fields-group">
  <h5 class="heading">Подраздел</h5>
</fieldset>

Проблема в том, что у fieldset есть border. Как только у div.fields-group тоже сделать border получится та же история: у .heading будет верхний отступ от border

2 комментария

  • +1
    Syrnik.com Syrnik.com 18 мая 2021 03:10 #

    Впрочем для этих целей есть <legend> так что можно не заморачиваться особо

  • +1

    Для компонента .fields лучше использовать структуру на основе обычных <div>.

    У fieldset все-таки (по умолчанию) свой довольно специфический внешний вид, отличающийся от того, что позволяет сделать .fields.

    За замечание спасибо — чуть подкрасим пару fieldset / legend, чтобы она тоже гармонично смотрелась в Webasyst 2.

    Добавить комментарий

    Чтобы добавить комментарий, зарегистрируйтесь или войдите