Padding CSS что это и как работает на примерах
При создании WEB страниц на html, всегда есть необходимость отступа одной части контента от другой. Либо глобальная верстка, нужны отступы одного блока от другого. Именно padding делает отступы внутри блока до самого текста (например). Сейчас мы на примерах разберем, padding css что это и как им пользоваться. Еще мы рассказали в одной из наших публикаций про margin css что это и как работает на примерах.
Padding css что это и как применить
padding — задает отступы внутри блока и можно в одном этом стиле указать отступы равноценные всем сторонам. А также, в одном этом стиле можно указать разные отступы для разных сторон блока. Рассмотрим пример внутреннего отступа в 20 пикселей для всех сторон:
<div class="box-padding">Пример внутреннего отступа padding в теге div.</div>
.box-padding {
background-color: #3498db;
color: white;
width: 200px;
padding: 20px;
}
В итоге мы получим следующий результат:
Точно также в стиле padding можно указать несколько значений, которые будут отвечать за каждую сторону блока. Первое значение 20px задает отступ сверху, второе значение 30px задает значение отступа справа, третье значение 40px задает отступ снизу и четвертое значение 50px задает отступ слева.
.box-padding {
background-color: #3498db;
color: white;
width: 200px;
padding: 20px 30px 40px 50px;
}
Padding top css что это и как применить
Именно padding-top задает отступ в блоке сверху, применять подобный способ желательно если никакой другой отступ просто не нужен, а нужен только сверху.
<div class="box-padding-top">Пример внутреннего отступа padding-top в теге div.</div>
.box-padding-top {
background-color: #3498db;
color: white;
width: 200px;
padding-top: 20px;
}
В итоге мы получим следующий результат от стиля padding-top:
Padding right css что это и как применить
padding-right задает отступ только справа, С других сторон отступа не будет от этого стиля.
<div class="box-padding-right">Пример внутреннего отступа padding-right в теге div.</div>
.box-padding-right {
background-color: #3498db;
color: white;
width: 200px;
padding-right: 20px;
}
В итоге мы получим следующий результат от стиля padding-right:
Padding bottom css что это и как применить
padding-bottom применяет внутренний отступ непосредственно внизу блока.
<div class="box-padding-bottom">Пример внутреннего отступа padding-bottom в теге div.</div>
.box-padding-bottom {
background-color: #3498db;
color: white;
width: 200px;
padding-bottom: 20px;
}
В итоге мы получим следующий результат от стиля padding-bottom:
Padding left css что это и как применить
padding-left делает отступ внутри блока слева.
<div class="box-padding-left">Пример внутреннего отступа padding-left в теге div.</div>
.box-padding-left {
background-color: #3498db;
color: white;
width: 200px;
padding-left: 20px;
}
В итоге мы получим следующий результат от стиля padding-left:
Единицы измерения отступа padding
Задавать расстояние можно не только в пикселях, но и в других единицах измерения. Все зависит от конкретных задач и вашей фантазии.
- px — единица измерения в пикселях.
- % — единица измерения в процентах.
- em — размер шрифта текущего элемента.
- in — дюйм.
- cm — сантиметр.
- mm — миллиметр.
- q — четверть миллиметра.
- pt — пункт (1 пункт равен 1/72 дюйма).
- pc — пика (1 пика равна 12 пунктам).
На самом деле это еще не все единицы измерения которые существуют в цифровом пространстве, но вы далеко не всеми из них будете пользоваться при разработке. В основном применяют px и %, еще порой попадаются em. Этого вполне достаточно чтоб научиться держать правильное внутреннее расстояние в блоке.
Итоги применения padding в css
Теперь вы знаете padding css что это такое и для чего он нужен. Ваша верстка приобретет новый вид, когда текст или изображение не будет прилипать к краю блока, а будет на нужном вам расстоянии. Рекомендую применять эти отступы при создании формы, как к тегу form так и внутреннее расстояние для самих элементов формы. В одной из прошлых статей мы писали о том как сделать форму в html.
