Практика

Рассмотрим как верстать такой блок. Он довольно большой, поэтому сразу приведу его исходный код.

<div class="layout-center-wrap mar30-tb">
    <div class="layout-wrap flex flex-jc-center">
        <div class="w600px-max bor5 bor-solid-t bor-blue rounded">
            <div class="bordered bor-none-t rounded10-b pad30-tb pad50-rl">
                <div class="h1 t-blue700">Регистрация</div>
                <div class="mar10-t t120 t-gray700">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur, quasi</div>
                <form>
                    <div class="mar30-t">
                        <input class="form-input w100" type="text" placeholder="name">
                        <div class="t90 t-italic t-gray600">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</div>
                    </div>

                    <div class="mar20-t">
                        <input class="form-input w100" type="email" placeholder="email">
                        <div class="t90 t-italic t-gray600">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</div>
                    </div>

                    <div class="mar20-t">
                        <input class="form-input w100" type="password" placeholder="password">
                        <div class="t90 t-italic t-gray600">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</div>
                    </div>

                    <div class="mar40-t"><button class="button button1" type="submit"><i class="fas fa-user mar10-r"></i>Регистрация</button></div>
                </form>
            </div>
        </div>
    </div>
</div>

Основа

Основа традиционная: layout-сетка. У нас всего одна ячейка, но мы всё равно размещаем её во flex-сетке. Делаем это для того, чтобы центрировать. Ты уже знаешь способ центрирования с помощью класса b-center (этот же способ используется в layout-centerXX), но здесь мы используем свойство flex (класс flex-jc-center): justify-content: center. Оно заставляет центрировать все ячейки по центру.

Сама ячейка имеет класс w600px-max, который ограничивает максимальную ширину до 600px. То есть блок будет корректно отображаться на всех экранах.

Рамка блока

Рамка блока имеет вверху синий толстый бордюр, а по другим сторонам серый тонкий. Когда стоит подобная задача, самый простой способ — вложить один блок в другой. Если между ними не будет отступов, то они визуально будут смотреться как единое целое.

Первый блок имеет только верхний бордюр: bor5 bor-solid-t bor-blue rounded. Класс rounded мы используем, чтобы немного скруглить края этого блока.

Вложенный блок имеет классы:

• bordered — делает общую серую 1px-рамку.
• bor-none-t — убирает верхний бордюр.
• rounded10-b — делает скругление по 10px для нижней стороны.

Таким образом и получается визуальный блок с разной границей. Этот подход (вложение одного блока в другой) часто используется при вёрстке и он проще, чем делать классы и стили для одного-единственного блока.

Поскольку нам нужно добавить ещё и отступы для формы, то делаем это с помощью классов pad30-tb pad50-rl: по 30px сверху и снизу, и по 50px справа и слева.

Форма

Форму я верстаю без атрибутов name и т.п. — в рабочем проекте ты уже сам сможешь их указать.

Каждый элемент формы представляет собой поле ввода и какая-то подсказка. Здесь я расположил подсказку внизу, но часто её располагают вверху.

Оформление подсказки сделано через классы t90 t-italic t-gray600: размер 0.9rem, курсив и цвет gray600.

Что касается отступов, то они подбираются согласно дизайна.

Отступы

Вообще насчёт отступов расскажу как их правильно использовать. Ты уже знаешь, что лучше указывать только верхний margin, чтобы не влиять на нижний блок. Но у тебя станет вопрос: а с какой точностью нужно выставлять размер отступа? Частенько дизайнеры рисуют их буквально из головы, просто на глазок. Для нас, верстальщиков, такой вариант никак не подходит, поэтому приходится использовать экранную линейку, чтобы измерить расстояние, которое придумал дизайнер.

Так вот запомни, что достаточная точность это 10px. Например ты измерил расстояние на макете и получилось 16px. При вёрстке используй 20px (например mar20-t) — это простое округление. То есть проблема не в том, что ты отошёл от исходного дизайна, а в том, что дизайнер не подготовил макет по нормальной сетке.

Если расстояние меньше 20-30px, то точность можешь увеличить до 5px. Это бывает актуально для близко расположенных элементов. А если расстояние более 50px, то точность можно уменьшить до 20-30px.

Раньше от верстальщиков требовалось верстать пиксель в пиксель, («пиксель перфект»). Проверку делали путем наложения исходного макета на скриншот вёрстки. Сейчас такое требование заказчики не ставят, потому что современная вёрстка адаптивная и разрисовывать все размеры экранов нормальный человек просто не станет. Сегодня вполне достаточно указать желаемое расстояния между элементами, а «резиновая» вёрстка разместит все элементы оптимальным способом.

Ещё важный момент — на фактический (визуальный) отступ будет влиять не только margin и padding, но и интерлиньяж и даже используемый шрифт. Расстояния между текстами не зря указывают в процентах, поскольку высота символа — это далеко не всегда высота строки. Некоторые шрифты имеют «высокие строки», но небольшие символы, поэтому приходится увеличивать кегль (размер) шрифта, что приводит к увеличению и расстояния между строками.

Поэтому, когда ты измеряешь расстояние от границы блока до визуального символа, то это ещё не значит, что там не заложен интерлиньяж — расстояние будет больше. Это ещё одна из причин не требовать высокой точности от указания размеров.

Задания

1. Возьми этот пример за основу и сделай пару новых вариантов. В одном из них поменяй цвет и попробуй добавить ещё один бордюр внизу.

2. После этого размести подсказки к полям вверху, только сделай это в виде красивых названий (не такие бледные как сейчас).

3. Добавь отдельный чекбокс «Согласен с правилами». Можешь использовать стандартный дизайн или вариант из Berry CSS.