Внешний отступ
Внешний отступ
«Внешний отступ» — бесплатный урок HTML for Kids на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 1 уроков всего.
Введение
Внешний отступ — одна из важнейших тем в CSS.
Внешние отступы — это пространства, которые мы создаём вокруг границ элемента.
Стороны внешнего отступа
При создании внешнего отступа для элемента любого типа не следует рассматривать его как отступ с 4 сторон (сверху, справа, снизу и слева).
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>Предупреждение
Как и для свойства margin, можно задать для него конкретное значение или процентное значение.
Предупреждение
Для значения внешнего отступа можно задать как конкретное, так и процентное значение.
Сокращённая запись внешнего отступа
В предыдущем примере нам пришлось написать 4 строки кода, чтобы задать внешний отступ со всех сторон блока.
CSS предоставляет сокращённую запись для внешнего отступа, позволяющую писать более короткий код.
После определения свойства внешнего отступа можно указать его значения, разделяя их пробелами, соответственно для верхней, правой, нижней и левой сторон (то есть по часовой стрелке).
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
Предупреждение об отрицательном внешнем отступе
Внешние отступы могут принимать отрицательное значение. Внутренние отступы, которые мы рассмотрим в следующем уроке, не могут иметь отрицательное значение.
автоматический внешний отступ
Мы будем использовать значение auto свойства внешнего отступа, чтобы центрировать элементы по горизонтали. Независимо от разрешения экрана элемент будет выровнен по горизонтали по центру.
Предположим, что ширина экрана составляет 1200px, а ширина элемента — 400px. Элемент будет выровнен по центру, а слева и справа останутся отступы по 400px.
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>Поздравляем
Поздравляем! 🎉
В этом разделе мы изучили внешние отступы CSS.
В следующем разделе мы изучим внутренние отступы CSS.
Часто задаваемые вопросы
Урок «Внешний отступ» бесплатный?
Да — полный текст урока «Внешний отступ» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 1 уроков всего.
Чему я научусь в уроке «Внешний отступ»?
Внешний отступ Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Внешний отступ»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.