Внутренний отступ
Внутренний отступ
«Внутренний отступ» — бесплатный урок HTML for Kids на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 1 уроков всего.
Введение
Здравствуйте!
Добро пожаловать на урок о внутренних отступах в CSS.
Они используются для создания пространства внутри границ элемента HTML.
Как и для внешнего отступа, для элемента можно задать внутренние отступы со всех 4 сторон.
Процентный тип
В предыдущем примере мы задали внутренний отступ в px, то есть статическое значение. Как и для внешнего отступа, можно задать значение в процентах.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightblue;
padding-top:10%;
padding-right: 10%;
padding-left: 10%;
padding-bottom:10%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
We assign percentage type
padding to this div element.
</div>
</body>
</html>
Как сократить код
Как и для внешнего отступа, внутренний отступ можно определить в одной строке с помощью сокращённого синтаксиса.
Значения внутренних отступов для верхней, правой, нижней и левой сторон можно указать через пробелы соответственно.
Посмотрите на пример кода — вы увидите, что он очень похож на запись для внешнего отступа.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 20px 10px 25px 10px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet,
consectetur
</div>
</body>
</html>Поздравляем
Поздравляем! 🎉
В этом разделе мы изучили внешние отступы 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 — локальная установка не требуется.