CSS - Внутренний отступ: Ваш终极 гид по позиционированию элементов

Здравствуйте, будущие магистры CSS! Сегодня мы погружаемся в чудесный мир свойства inset. Как ваш доброжелательный соседский компьютерный учитель, я с радостью провожу вас через это путешествие. Поверьте мне, к концу этого учебника вы будете использовать inset, как профи!

Что такое CSS-свойство Inset?

Прежде чем окунуться в深海, давайте начнем с азов. Свойство inset - это как швейцарский армейский нож для позиционирования элементов в CSS. Этоorthand-свойство, которое устанавливает все четыре стороны позиции элемента сразу. Представьте его как магическую палочку, которая может放置 ваш элемент точно туда, куда вы хотите на странице.

Возможные значения и синтаксис

Давайте разберем возможные значения и синтаксис свойства inset. Не волнуйтесь, если это сначала выглядит пугающе - мы пройдемся по каждому шагу!

Значение	Описание
auto	Браузер calculates the inset
длина	Указывает отступ в px, pt, cm и т.д.
%	Указывает отступ в % от содержащего элемента
inherit	Наследует значение от родительского элемента
initial	Устанавливает свойство на его значение по умолчанию
unset	Сбрасывает свойство до его естественного значения

Основной синтаксис для свойства inset выглядит так:

селектор {
inset: значение;
}

Теперь давайте рассмотрим различные ways для использования этой мощной собственности!

CSS Inset - Четыре длины

Когда вы предоставляете четыре значения для свойства inset, вы устанавливаете верхнюю, правую, нижнюю и левую позиции элемента сразу. Это как обнять ваш элемент со всех сторон!

.box {
position: absolute;
inset: 10px 20px 30px 40px;
}

В этом примере мы говорим нашему элементу .box, чтобы он находился на 10px от верха, 20px от правого, 30px от низа и 40px от левого содержащего элемента. Это как дать вашему элементу очень конкретные инструкции, где стоять!

CSS Inset - Три длины

Что happens, когда мы используем только три значения? CSS становится умным! Он предполагает, что левое значение должно быть таким же, как и правое.

.box {
position: absolute;
inset: 10px 20px 30px;
}

Это эквивалентно inset: 10px 20px 30px 20px. Наш ящик теперь на 10px от верха, 20px от правого и левого, и 30px от низа. Это как tell ваш элемент сжаться по сторонам!

CSS Inset - Две длины

С двумя значениями CSS становится еще умнее. Первое значение применяется к верху и низу, а второе - к левому и правому.

.box {
position: absolute;
inset: 10px 20px;
}

Это то же самое, что и inset: 10px 20px 10px 20px. Наш ящик теперь на 10px от верха и низа, и 20px от левого и правого. Это как дать вашему элементу симметричную рамку!

CSS Inset - Одно значение

Когда вы используете только одно значение, оно применяется ко всем четырем сторонам. Это как обернуть ваш элемент в uniform blanket пространства!

.box {
position: absolute;
inset: 10px;
}

Это эквивалентно inset: 10px 10px 10px 10px. Наш ящик теперь имеет 10px зазор со всех сторон от содержащего элемента.

CSS Inset - Процентное значение

Проценты super полезны, когда вы хотите, чтобы ваш макет был адаптивным. Процент рассчитывается на основе размеров содержащего элемента.

.box {
position: absolute;
inset: 10%;
}

В этом случае наш ящик будет расположен на 10% от всех сторон его контейнера. Если контейнер растет или уменьшается, позиционирование будет соответствующим образом корректироваться. Это как give ваш элемент процентный personal space bubble!

CSS Inset - Смешанные значения

Настоящее удовольствие начинается, когда мы начинаем mix различные единицы. Вы можете использовать комбинацию процентов, пикселей и даже ключевого слова auto.

.box {
position: absolute;
inset: 10% 20px auto 5em;
}

Здесь наш ящик на 10% от верха, 20px от правого, автоматически позиционируется снизу (что обычно означает, что он займет оставшееся место), и 5em от левого. Это как give ваш элемент уникальный position fingerprint!

CSS Inset - Значение Auto

Значение auto особенно полезно, когда вы хотите, чтобы браузер calculated the inset автоматически.

.box {
position: absolute;
inset: auto 20px 10px;
}

В этом примере верх будет calculated автоматически, а правый и левый установлены на 20px, и низ на 10px. Это как tell ваш элемент "figure out the top yourself, but stick to these rules for the other sides".

CSS Inset - Связанные свойства

Хотя inset incredibly полезен, полезно знать и его отдельные компоненты. Это top, right, bottom, и left. Вы можете использовать их, когда вам нужно больше granular control.

.box {
position: absolute;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
}

Это достигает того же результата, что и inset: 10px 20px 30px 40px, но позволяет вам individually adjust каждую сторону по мере необходимости.

Заключение

И вот вы,folks! Вы только что совершили grand tour свойства CSS inset. От его базового синтаксиса до различных случаев использования, вы теперь имеете власть позиционировать элементы с точностью и гибкостью.

помните, ключ к овладению CSS - это практика. Так что вперед, экспериментируйте с этими примерами, mix и match значения, и посмотрите, как inset может transform ваши макеты. Before вы знаете это, вы будете inset-ting элементы во сне!

Счастливого кодирования, и пусть ваши элементы всегда будут perfectly positioned!

Credits: Image by storyset