В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.
Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C . В боксовой модели (box model) поля - это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.
Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing .
В любом случае следует помнить, что поля могут быть как включены в ширину или высоту элемента, так и нет. Отступы же всегда задаются снаружи элемента.
Теперь давайте рассмотрим как правильно расставлять поля и отступы между элементами. Возьмем в качестве примера следующий блок.
Это блок новостей news . Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title , news__list и news__more-link .
Другие новости
Поскольку каждый из этих элементов имеет одинаковые отступы слева и справа, то лучше задать поля родительскому блоку, а не задавать отступы слева и справа для каждого элемента в отдельности.
News { padding: 20px 25px; }
Таким образом, при необходимости изменить значение полей справа и слева это нужно будет сделать в одном месте . А при добавлении нового элемента внутрь блока новостей, он уже будет иметь нужные отступы слева и справа.
Часто бывает так, что все элементы внутри блока имеют одинаковые отступы слева и справа, кроме одного, который вообще не должен иметь отступов, например, из-за фона. В этом случае для элемента можно задать отрицательные отступы. Тогда не придется убирать поля внутри блока для остальных элементов.
Теперь нужно задать вертикальные отступы между элементами. Для этого следует определить какой из элементов является обязательным . Очевидно что блок новостей не может существовать без списка новостей, в то же время ссылки «Другие новости» может и не быть, заголовок тоже может быть убран, например, при изменении дизайна.
Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.
News__title { margin-bottom: 10px; } .news__more-link { margin-top: 12px; }
Мы могли бы достигнуть такого же внешнего результата, добавив отступы сверху и снизу для списка новостей.
News__list { margin: 10px 0 12px 0; }
Теперь нужно задать отступы между отдельными новостями. Опять же, нужно принять во внимание, что количество новостей может меняться, и в списке может быть только одна новость.
Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор:first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора:last-child , который был добавлен только в спецификации CSS версии 3.0 .
News__list-item { margin-top: 18px; } .news__list-item:first-child { margin-top: 0; }
Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное - определить, какие элементы блока являются основными (обязательными ), а какие опциональными .
Иногда мы не можем опираться на обязательные элементы. Например, у нас есть всплывающее окошко popup , внутри которого может выводиться какой-то заголовок и текст. Причем в каких-то случаях может не быть текста, а в каких-то и заголовка. То есть оба элемента являются опциональными.
В этом случае можно использовать следующий способ задания отступов.
Popup__header + .popup__text { margin-top: 15px; }
Тогда отступ появится, только если будут использоваться оба элемента. В случае же вывода только заголовка или только текста, лишнего отступа не будет.
Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ - это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px , а другому отступ сверху в 20px , отступ между ними будет не 50px , а 30px .
То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».
Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля (padding) также суммируются.
Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px , а для заголовка второго уровня отступ сверху 20px и снизу 10px , а для всех параграфов зададим отступ сверху 10px .
H1 { margin-bottom: 24px; } h2 { margin-top: 24px; margin-bottom: 12px; } p { margin-top: 12px; }
Теперь заголовок h2 можно расположить как после заголовка h1 , так и после параграфа. В любом случае отступ сверху не будет превышать 24px .
Подводя итог, я бы хотел перечислить правила, которых я придерживаюсь при расстановке полей и отступов.
Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации.
Примечание : Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.
У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя text-align , центральные блоки, используя auto margin s, а в макетах таблицы или встроенного блока, используя vertical-align свойство. Выравнивание текста теперь покрывается модулями Inline Layout и CSS Text , и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.
В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью justify-content . На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью align-items . Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки align-self в центр.
В этом примере три элемента гибкости выровнены по главной оси с использованием justify-content и на поперечной оси с использованием align-items . Первый элемент переопределяет align-items , заданные в группе align-self по center .
Спецификация описывает некоторую терминологию выравнивания, чтобы упростить обсуждение этих свойств выравнивания вне их реализации в рамках конкретного метода компоновки. Существуют также некоторые ключевые концепции, которые являются общими для всех методов макета.
Выравнивание связано с режимами записи, когда мы выравниваем элемент, который мы не рассматриваем, если мы сопоставляем его с физическими размерами сверху, справа, снизу и слева. Вместо этого мы описываем выравнивание с точки зрения начала и конца конкретного измерения, с которым мы работаем. Это гарантирует, что выравнивание работает так же, как в режиме записи, который имеет документ.
При использовании свойств выравнивания ячеек вы выровняете содержимое по одной из двух осей - inline (или main) оси и block (или cross) оси. Внутренняя ось - это ось, по которой используются слова в потоке предложения в режиме записи - для английского языка, например, встроенная ось горизонтальна. Ось блока - это ось, вдоль которой выложены блоки, такие как элементы абзаца, и проходит по оси Inline.
При выравнивании элементов на встроенной оси вы будете использовать свойства, начинающиеся с justify- :
При выравнивании элементов на оси блока вы будете использовать свойства, которые начинаются с align- :
Flexbox добавляет дополнительное усложнение в том, что указанное выше верно, когда flex-direction установлено в row . Свойства меняются местами, когда flexbox установлен в column . Поэтому при работе с flexbox легче думать о главной и поперечной оси, а не о линии и блоке. Свойства justify- всегда используются для выравнивания по главной оси, align- на поперечной оси.
Объект выравнивания - это то, что выровнено. Для justify-self , или align-self , или при настройке этих значений как группы с justify-items или align-items это будет поле элемента, в котором используется это свойство. Свойства justify-content и align-content различаются для каждого метода макета.
Контейнер выравнивания - это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.
На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.
Если вы установите выравнивание, которое не может быть выполнено, тогда возвратное выравнивания вступит в игру и обработает доступное пространство. Это резервное выравнивание указывается отдельно для каждого метода макета и подробно описано на странице для этого метода.
Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов.
Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с justify-content и align-content , а также для самовыравнивания с justify-self и align-self .
Помимо физических значений left и right , которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.
Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start , это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.
Оба этих примера имеют justify-content: start , однако местоположение начала изменяется в соответствии с режимом записи.
Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощью justify-content и align-content , а также для самовыравнивания с justify-self и align-self .
Исходное выравнивание содержимого - указание значения выравнивания базовой линии для justify-content или align-content - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.
Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items .
Ключевые слова расспеределенного выравнивания используются с параметрами align-content и justify-content . Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:
Например, элементы Flex Layout сначала выровнены с использованием flex-start. Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, с flex-direction в виде row элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов.
Если вы устанавливаете justify-content: space-between в контейнере flex, доступное пространство теперь разделяется и помещается между элементами.
Для того, чтобы эти ключевые слова вступили в силу, должно быть доступно пространство в измерении, для которого вы хотите выровнять элементы. Без места, нечего распространять.
safe и unsafe ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово safe будет выравниваться для start в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.
Если вы укажете unsafe , выравнивание будет выполнено, даже если это приведет к такой потере данных.
Спецификация выравнивания коробки также включает свойства gap , row-gap и column-gap . Эти свойства позволяют установить постоянный разрыв между элементами в строке или столбце в любом методе макета, который имеет элементы, расположенные таким образом.
Свойство gap является сокращением для row-gap и column-gap , что позволяет сразу установить эти свойства.
CSS предлагает веб-разработчику колоссальные возможности для оформления HTML-страниц. Новичку они покажутся сложными, но если тщательно и методично в них разбираться, технология таблиц стилей покорится, и вёрстка сайтов перестанет доставлять трудности. Одно из незаменимых свойств CSS - padding . Используется оно, чтобы задать поля блоков HTML-страниц.
Сайт строится из кирпичиков - блоков. При этом каждый элемент, вне зависимости от его содержимого, должен иметь прямоугольную форму. То есть все изображения и надписи мысленно заключаются разработчиком в «коробочки», располагая которые, он создаёт веб-страницу.
Чаще всего блоки задаются тегами
,
Создатели каскадных таблиц стилей предусмотрели несколько вариантов записи атрибута для установки полей. Сделать пустую область внутри блока можно восемью разными способами! Таблица ниже показывает примеры для каждого из варианта и даёт к ним краткие пояснения.
Пример использования | Пояснение |
padding: 15 px; | Если после атрибута следует одно число, это означает, что элемент будет иметь одинаковые поля со всех сторон. Запись px предполагает, что значение задаётся в пикселях. То есть в итоге блок будет иметь поля по 15 пикселей. |
padding: 18 px 36 px; | Первое из двух чисел указывает, что вертикальные поля составят по 18 пикселей, боковые - в два раза больше - 36 пикселей. |
padding: 6 px 12 px 18 px; | Среднее число - значение полей по бокам (левого и правого), два других - вертикальные поля. При этом первое число (6 px) относится к верхнему полю, а последнее (18 px) - к нижнему. |
padding: 6 px 12 px 18 px 36 px; | Форма записи свойства CSS padding , в которой присутствуют четыре числа, позволяет задать поля со всех сторон блока. Числовые значения последовательно применяются к верхнему полю и далее по часовой стрелке - к правому, нижнему и левому. |
padding-left: 14 px; | Приписка left говорит сама за себя - поле будет установлено только слева элемента. |
padding-right: 14 px; | Аналогично предыдущему варианту записи - поле создастся только справа блока. |
padding-top: 14 px; | Запись определяет поле сверху. |
padding-bottom: 14 px; | Запись определяет поле снизу. |
Следует заметить, что по умолчанию в CSS padding равен нулю. Данный атрибут не является наследуемым, то есть его необходимо устанавливать для каждого блока. Помимо привычных и понятных пикселей, ширина пустого пространства вокруг блоков задаётся и в относительных единицах. Например, в примерах выше можно записать 5% - в результате ширина поля просчитается браузером автоматически.
Итак, формы записи атрибута рассмотрены, но как его использовать на HTML-странице? Первый вариант - более «красивый», когда всё, что касается технологии CSS, не прописывается в HTML, а вынесено в отдельный файл с соответствующим расширением.
Второй вариант - запись непосредственно в тег <style >. CSS padding в этом случае задаётся следующим образом:
< div style=" padding: 22 px">
Как записать атрибут - выбирает верстальщик. В любом случае необходимо владеть всеми способами применения свойства для определения полей, чтобы при случае воспользоваться им.
Математика в CSS не работает. Например, есть заголовок (тег h1) и за ним следует абзац (тег p). Оба элемента блочные, из чего следует, что их ширина равна элементу-родителю и в потоке они расположены один под другим. Также представим, что заголовок имеет нижнее поле (margin-bottom) равное 30px, а абзац – верхнее поле (margin-top) равное 50px. Казалось бы, промежуток между заголовком и абзацем должен быть равен сумме этих двух полей, то есть 80px, однако нет. Соседние поля не складываются, браузер просто выбирает наибольшее из двух значений, в нашем случае 50px. Поэтому, если вы хотите сделать промежуток между двумя элементами при участии двух элементов, используйте отступы (padding).
Абзац. Есть верхнее поле в 50px
Или вот ситуация: в блоке div лежит абзац (тег p), у абзаца присутствуют верхнее и нижнее поля (margin-top и margin-bottom) равные 50px. Казалось бы, под действием этих полей блок div должен расшириться, однако нет. Поля выступают за пределы блока div (рис. 1). Данный эффект называется конфликтом полей. Чтобы избежать выхода поля за пределы блочного элемента, необходимо элементу-родителю (в нашем случае тегу div) назначить верхний и нижний отступы (padding) равные, например, 1 px. Или границу (border).
Абзац. Есть верхнее и нижнеее поле в 50px
Или вы можете использовать свойство overflow для элемента-родителя со значением отличным от visible: этим вы также предотвратите выход поля элемента-ребенка за пределы элемента-родителя.
В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.
Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C . В боксовой модели (box model) поля - это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.
Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing .
В любом случае следует помнить, что поля могут быть как включены в ширину или высоту элемента, так и нет. Отступы же всегда задаются снаружи элемента.
Теперь давайте рассмотрим как правильно расставлять поля и отступы между элементами. Возьмем в качестве примера следующий блок.
Это блок новостей news . Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title , news__list и news__more-link .
Другие новости
Поскольку каждый из этих элементов имеет одинаковые отступы слева и справа, то лучше задать поля родительскому блоку, а не задавать отступы слева и справа для каждого элемента в отдельности.
News { padding: 20px 25px; }
Таким образом, при необходимости изменить значение полей справа и слева это нужно будет сделать в одном месте . А при добавлении нового элемента внутрь блока новостей, он уже будет иметь нужные отступы слева и справа.
Часто бывает так, что все элементы внутри блока имеют одинаковые отступы слева и справа, кроме одного, который вообще не должен иметь отступов, например, из-за фона. В этом случае для элемента можно задать отрицательные отступы. Тогда не придется убирать поля внутри блока для остальных элементов.
Теперь нужно задать вертикальные отступы между элементами. Для этого следует определить какой из элементов является обязательным . Очевидно что блок новостей не может существовать без списка новостей, в то же время ссылки «Другие новости» может и не быть, заголовок тоже может быть убран, например, при изменении дизайна.
Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.
News__title { margin-bottom: 10px; } .news__more-link { margin-top: 12px; }
Мы могли бы достигнуть такого же внешнего результата, добавив отступы сверху и снизу для списка новостей.
News__list { margin: 10px 0 12px 0; }
Теперь нужно задать отступы между отдельными новостями. Опять же, нужно принять во внимание, что количество новостей может меняться, и в списке может быть только одна новость.
Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор:first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора:last-child , который был добавлен только в спецификации CSS версии 3.0 .
News__list-item { margin-top: 18px; } .news__list-item:first-child { margin-top: 0; }
Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное - определить, какие элементы блока являются основными (обязательными ), а какие опциональными .
Иногда мы не можем опираться на обязательные элементы. Например, у нас есть всплывающее окошко popup , внутри которого может выводиться какой-то заголовок и текст. Причем в каких-то случаях может не быть текста, а в каких-то и заголовка. То есть оба элемента являются опциональными.
В этом случае можно использовать следующий способ задания отступов.
Popup__header + .popup__text { margin-top: 15px; }
Тогда отступ появится, только если будут использоваться оба элемента. В случае же вывода только заголовка или только текста, лишнего отступа не будет.
Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ - это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px , а другому отступ сверху в 20px , отступ между ними будет не 50px , а 30px .
То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».
Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля (padding) также суммируются.
Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px , а для заголовка второго уровня отступ сверху 20px и снизу 10px , а для всех параграфов зададим отступ сверху 10px .
H1 { margin-bottom: 24px; } h2 { margin-top: 24px; margin-bottom: 12px; } p { margin-top: 12px; }
Теперь заголовок h2 можно расположить как после заголовка h1 , так и после параграфа. В любом случае отступ сверху не будет превышать 24px .
Подводя итог, я бы хотел перечислить правила, которых я придерживаюсь при расстановке полей и отступов.
Теги: Добавить метки