CSS предлагает веб-разработчику колоссальные возможности для оформления HTML-страниц. Новичку они покажутся сложными, но если тщательно и методично в них разбираться, технология таблиц стилей покорится, и вёрстка сайтов перестанет доставлять трудности. Одно из незаменимых свойств CSS - padding . Используется оно, чтобы задать поля блоков HTML-страниц.
Что такое блоки?
Сайт строится из кирпичиков - блоков. При этом каждый элемент, вне зависимости от его содержимого, должен иметь прямоугольную форму. То есть все изображения и надписи мысленно заключаются разработчиком в «коробочки», располагая которые, он создаёт веб-страницу.
Чаще всего блоки задаются тегами
,
-, . К каждому такому элементу применяют свойства CSS: padding
, margin
, border
, width
и другие. Ширина прямоугольника-блока задаётся свойством width
, затем каждый элемент оформляется полями, которые очерчиваются с помощью атрибута border.
Наконец, компонент страницы может иметь внешние поля, или отступы - margin
, отделяющие его от другого блока.Синтаксис свойства padding в CSS
Создатели каскадных таблиц стилей предусмотрели несколько вариантов записи атрибута для установки полей. Сделать пустую область внутри блока можно восемью разными способами! Таблица ниже показывает примеры для каждого из варианта и даёт к ним краткие пояснения.
Пример использования
Пояснение
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).
Заголовок.
Присутствует нижнеее поле в 30px
Абзац. Есть верхнее поле в 50px
Или вот ситуация: в блоке div лежит абзац (тег p), у абзаца присутствуют верхнее и нижнее поля (margin-top и margin-bottom) равные 50px. Казалось бы, под действием этих полей блок div должен расшириться, однако нет. Поля выступают за пределы блока div (рис. 1). Данный эффект называется конфликтом полей. Чтобы избежать выхода поля за пределы блочного элемента, необходимо элементу-родителю (в нашем случае тегу div) назначить верхний и нижний отступы (padding) равные, например, 1 px. Или границу (border).
Абзац. Есть верхнее и нижнеее поле в 50px
Или вы можете использовать свойство overflow для элемента-родителя со значением отличным от visible: этим вы также предотвратите выход поля элемента-ребенка за пределы элемента-родителя.
Последнее обновление: 08.04.2016
Однострочное текстовое поле создается с помощью элемента input
, когда его атрибут type имеет значение text:
С помощью ряда дополнительных атрибутов можно настроить текстовое поле:
dirname
: устанавливает направление текста
maxlength
: максимально допустимое количество символов в текстовом поле
pattern
: определяет шаблон, которому должен соответствовать вводимый текст
placeholder
: устанавливает текст, который по умолчанию отображается в текстовом поле
readonly
: делает текстовом поле доступным только для чтения
required
: указывает, что текстовое поле обязательно должно иметь значение
size
: устанавливает ширину текстового поля в видимых символах
value
: устанавливает значение по умолчанию в текстовом поле
Применим некоторые атрибуты:
Текстовые поля в HTML5
В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size - то есть количество
символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем
maxlength, мы не сможем.
В данном случае также важно различать атрибуты value и placeholder , хотя оба устанавливают видимый текст в поле.
Однако placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом. В то время как
значение value представляет введенный в поле текст по умолчанию:
Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с
disabled текстовое поле затеняется:
Среди атрибутов текстового поля также следует отметить такой атрибут как list
. Он содержит ссылку на элемент datalist
,
который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:
Текстовые поля в HTML5
Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option
определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.
Поле поиска
Для создания полей поиска предназначен элемент input с атрибутом type="search" . Формально он представляет собой простое текстовое поле:
Поиск в HTML5
Поле ввода пароля
Для ввода пароля используется элемент input с атрибутом type="password" . Его отличительной чертой является то, что вводимые символы маскируются точками:
Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации.
Примечание
: Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.
Старые методы выравнивания
У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя text-align , центральные блоки, используя auto margin s, а в макетах таблицы или встроенного блока, используя vertical-align свойство. Выравнивание текста теперь покрывается модулями Inline Layout и CSS Text , и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.
Пример выравнивания раскладки сетки CSS
В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью justify-content . На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью align-items . Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки align-self в центр.
Пример выравнивания Flexbox
В этом примере три элемента гибкости выровнены по главной оси с использованием 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- на поперечной оси.
The alignment subject
Объект выравнивания
- это то, что выровнено. Для justify-self , или align-self , или при настройке этих значений как группы с justify-items или align-items это будет поле элемента, в котором используется это свойство. Свойства justify-content и align-content различаются для каждого метода макета.
The alignment container
Контейнер выравнивания
- это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.
На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.
Fallback alignment
Если вы установите выравнивание, которое не может быть выполнено, тогда возвратное выравнивания
вступит в игру и обработает доступное пространство. Это резервное выравнивание указывается отдельно для каждого метода макета и подробно описано на странице для этого метода.
Типы выравнивания
Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов.
- Positional alignment
(выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.
- Baseline alignment
(исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.
- Distributed alignment
(распределенное выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.
Значения ключевых слов позиционирования
Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с justify-content и align-content , а также для самовыравнивания с justify-self и align-self .
- center
- start
- self-start
- self-end
- flex-start for Flexbox only
- flex-end for Flexbox only
- right
Помимо физических значений left и right , которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.
Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start , это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.
Оба этих примера имеют justify-content: start , однако местоположение начала изменяется в соответствии с режимом записи.
Исходное выравнивание
Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощью justify-content и align-content , а также для самовыравнивания с justify-self и align-self .
- baseline
- first baseline
- last baseline
Исходное выравнивание содержимого - указание значения выравнивания базовой линии для justify-content или align-content - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.
Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items .
Distributed alignment
Ключевые слова расспеределенного выравнивания
используются с параметрами align-content и justify-content . Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:
- stretch
- space-between
- space-around
- space-evenly
Например, элементы Flex Layout сначала выровнены с использованием flex-start. Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, с flex-direction в виде row элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов.
Если вы устанавливаете justify-content: space-between в контейнере flex, доступное пространство теперь разделяется и помещается между элементами.
Для того, чтобы эти ключевые слова вступили в силу, должно быть доступно пространство в измерении, для которого вы хотите выровнять элементы. Без места, нечего распространять.
Выравнивание переполнения
safe и unsafe ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово safe будет выравниваться для start в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.
Если вы укажете unsafe , выравнивание будет выполнено, даже если это приведет к такой потере данных.
Пробелы между boxes
Спецификация выравнивания коробки также включает свойства gap , row-gap и column-gap . Эти свойства позволяют установить постоянный разрыв между элементами в строке или столбце в любом методе макета, который имеет элементы, расположенные таким образом.
Свойство gap является сокращением для row-gap и column-gap , что позволяет сразу установить эти свойства.
Padding-top
Со структурой блока, надеюсь, Вы уже знакомы. Если нет, то она представлена ниже.
Структура блока
И так. Вам уже, наверное, известно, что поля и отступы у блока представлены свойствами padding
и margin
соответственно. И в предыдущей статье мы уже частично затронули эту тему. На этой странице немного подробнее рассмотрим поля (padding
) и отступы (margin
).
Свойства margin
и padding
очень похожи друг на друга, выполняют схожие функции, поэтому их часто путают. Но делать этого конечно же не стоит, так как все-таки поля и отступы это совершенно разные вещи. Впрочем это хорошо видно из рисунка, ведь не случайно он здесь приведен.
Итак. Поля задаются свойством padding
. Это внутренние расстояния от границ блока до его содержимого.
Свойство применимо ко всем элементам.
Расстояние задается в единицах длины, принятых в CSS , в %
, либо (по умолчанию
Свойство padding
является универсальным, так как устанавливает поля от границ элемента до его содержимого для всех его сторон, объединяя таким образом в себе свойства padding-top
, padding-right
, padding-bottom
и padding-left
, которые задают ширину полей для каждой из сторон элемента индивидуально.
Отступы задают при помощи свойства margin
, которые определяют расстояние от границ блока до ближайших элементов или до краев окна браузера.
Свойство margin
также применимо ко всем элементам.
Отступы также задаются в единицах длины, принятых в CSS , в %
, либо (по умолчанию
) определяется браузером автоматически.
Свойство margin
является универсальным, так как задает величину отступов от границ элемента для всех его сторон, объединяя таким образом в себе свойства margin-top
, margin-right
, margin-bottom
и margin-left
, которые устанавливают ширину отступов от каждой из границ элемента индивидуально.
И еще
: отступы (margin
) располагаются за пределами блока, в то время как поля (padding
) внутри его, поэтому фон блока или его фоновое изображение распространяются только на поля, а отступы всегда прозрачны, либо имеют фон основного (родительского
) блока или фон страницы.
Фрагмент кода:
;
">
Таблица располагается внутри контейнера с красной границей и синим фоном.
Ширина отступов от границы таблицы до красной границы контейнера составляет 10 пикселей.
В ячейке слева расположено изображение. Отступы от изображения до границ ячейки составляют 25 пикселей.
Поля правой ячейки составляют 10 пикселей!
Синтаксис свойства padding в CSS
Создатели каскадных таблиц стилей предусмотрели несколько вариантов записи атрибута для установки полей. Сделать пустую область внутри блока можно восемью разными способами! Таблица ниже показывает примеры для каждого из варианта и даёт к ним краткие пояснения.
Пример использования | Пояснение |
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).
Заголовок. Присутствует нижнеее поле в 30px
Абзац. Есть верхнее поле в 50px
Или вот ситуация: в блоке div лежит абзац (тег p), у абзаца присутствуют верхнее и нижнее поля (margin-top и margin-bottom) равные 50px. Казалось бы, под действием этих полей блок div должен расшириться, однако нет. Поля выступают за пределы блока div (рис. 1). Данный эффект называется конфликтом полей. Чтобы избежать выхода поля за пределы блочного элемента, необходимо элементу-родителю (в нашем случае тегу div) назначить верхний и нижний отступы (padding) равные, например, 1 px. Или границу (border).
Абзац. Есть верхнее и нижнеее поле в 50px
Или вы можете использовать свойство overflow для элемента-родителя со значением отличным от visible: этим вы также предотвратите выход поля элемента-ребенка за пределы элемента-родителя.
Последнее обновление: 08.04.2016
Однострочное текстовое поле создается с помощью элемента input , когда его атрибут type имеет значение text:
С помощью ряда дополнительных атрибутов можно настроить текстовое поле:
dirname : устанавливает направление текста
maxlength : максимально допустимое количество символов в текстовом поле
pattern : определяет шаблон, которому должен соответствовать вводимый текст
placeholder : устанавливает текст, который по умолчанию отображается в текстовом поле
readonly : делает текстовом поле доступным только для чтения
required : указывает, что текстовое поле обязательно должно иметь значение
size : устанавливает ширину текстового поля в видимых символах
value : устанавливает значение по умолчанию в текстовом поле
Применим некоторые атрибуты:
В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size - то есть количество символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем maxlength, мы не сможем.
В данном случае также важно различать атрибуты value и placeholder , хотя оба устанавливают видимый текст в поле. Однако placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом. В то время как значение value представляет введенный в поле текст по умолчанию:
Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с disabled текстовое поле затеняется:
Среди атрибутов текстового поля также следует отметить такой атрибут как list . Он содержит ссылку на элемент datalist , который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:
Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.
Поле поиска
Для создания полей поиска предназначен элемент input с атрибутом type="search" . Формально он представляет собой простое текстовое поле:
Поле ввода пароля
Для ввода пароля используется элемент input с атрибутом type="password" . Его отличительной чертой является то, что вводимые символы маскируются точками:
Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации.
Примечание : Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.
Старые методы выравнивания
У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя text-align , центральные блоки, используя auto margin s, а в макетах таблицы или встроенного блока, используя vertical-align свойство. Выравнивание текста теперь покрывается модулями Inline Layout и CSS Text , и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.
Пример выравнивания раскладки сетки CSS
В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью justify-content . На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью align-items . Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки align-self в центр.
Пример выравнивания Flexbox
В этом примере три элемента гибкости выровнены по главной оси с использованием 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- на поперечной оси.
The alignment subject
Объект выравнивания - это то, что выровнено. Для justify-self , или align-self , или при настройке этих значений как группы с justify-items или align-items это будет поле элемента, в котором используется это свойство. Свойства justify-content и align-content различаются для каждого метода макета.
The alignment container
Контейнер выравнивания - это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.
На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.
Fallback alignment
Если вы установите выравнивание, которое не может быть выполнено, тогда возвратное выравнивания вступит в игру и обработает доступное пространство. Это резервное выравнивание указывается отдельно для каждого метода макета и подробно описано на странице для этого метода.
Типы выравнивания
Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов.
- Positional alignment (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.
- Baseline alignment (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.
- Distributed alignment (распределенное выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.
Значения ключевых слов позиционирования
Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с justify-content и align-content , а также для самовыравнивания с justify-self и align-self .
- center
- start
- self-start
- self-end
- flex-start for Flexbox only
- flex-end for Flexbox only
- right
Помимо физических значений left и right , которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.
Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start , это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.
Оба этих примера имеют justify-content: start , однако местоположение начала изменяется в соответствии с режимом записи.
Исходное выравнивание
Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощью justify-content и align-content , а также для самовыравнивания с justify-self и align-self .
- baseline
- first baseline
- last baseline
Исходное выравнивание содержимого - указание значения выравнивания базовой линии для justify-content или align-content - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.
Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items .
Distributed alignment
Ключевые слова расспеределенного выравнивания используются с параметрами align-content и justify-content . Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:
- stretch
- space-between
- space-around
- space-evenly
Например, элементы Flex Layout сначала выровнены с использованием flex-start. Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, с flex-direction в виде row элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов.
Если вы устанавливаете justify-content: space-between в контейнере flex, доступное пространство теперь разделяется и помещается между элементами.
Для того, чтобы эти ключевые слова вступили в силу, должно быть доступно пространство в измерении, для которого вы хотите выровнять элементы. Без места, нечего распространять.
Выравнивание переполнения
safe и unsafe ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово safe будет выравниваться для start в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.
Если вы укажете unsafe , выравнивание будет выполнено, даже если это приведет к такой потере данных.
Пробелы между boxes
Спецификация выравнивания коробки также включает свойства gap , row-gap и column-gap . Эти свойства позволяют установить постоянный разрыв между элементами в строке или столбце в любом методе макета, который имеет элементы, расположенные таким образом.
Свойство gap является сокращением для row-gap и column-gap , что позволяет сразу установить эти свойства.
Padding-topСо структурой блока, надеюсь, Вы уже знакомы. Если нет, то она представлена ниже.
Структура блока
И так. Вам уже, наверное, известно, что поля и отступы у блока представлены свойствами padding и margin соответственно. И в предыдущей статье мы уже частично затронули эту тему. На этой странице немного подробнее рассмотрим поля (padding ) и отступы (margin ).
Свойства margin и padding очень похожи друг на друга, выполняют схожие функции, поэтому их часто путают. Но делать этого конечно же не стоит, так как все-таки поля и отступы это совершенно разные вещи. Впрочем это хорошо видно из рисунка, ведь не случайно он здесь приведен.
Итак. Поля задаются свойством padding . Это внутренние расстояния от границ блока до его содержимого.
Свойство применимо ко всем элементам.
Расстояние задается в единицах длины, принятых в CSS , в % , либо (по умолчанию
Свойство padding является универсальным, так как устанавливает поля от границ элемента до его содержимого для всех его сторон, объединяя таким образом в себе свойства padding-top , padding-right , padding-bottom и padding-left , которые задают ширину полей для каждой из сторон элемента индивидуально.
Отступы задают при помощи свойства margin , которые определяют расстояние от границ блока до ближайших элементов или до краев окна браузера.
Свойство margin также применимо ко всем элементам.
Отступы также задаются в единицах длины, принятых в CSS , в % , либо (по умолчанию ) определяется браузером автоматически.
Свойство margin является универсальным, так как задает величину отступов от границ элемента для всех его сторон, объединяя таким образом в себе свойства margin-top , margin-right , margin-bottom и margin-left , которые устанавливают ширину отступов от каждой из границ элемента индивидуально.
И еще : отступы (margin ) располагаются за пределами блока, в то время как поля (padding ) внутри его, поэтому фон блока или его фоновое изображение распространяются только на поля, а отступы всегда прозрачны, либо имеют фон основного (родительского ) блока или фон страницы.
Фрагмент кода:
|
|
Таблица располагается внутри контейнера с красной границей и синим фоном. Ширина отступов от границы таблицы до красной границы контейнера составляет 10 пикселей. В ячейке слева расположено изображение. Отступы от изображения до границ ячейки составляют 25 пикселей. Поля правой ячейки составляют 10 пикселей! |