Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не «прилипали» друг к другу.
CSS — Отступы
Внутренний отступ
Есть 2 вида отступов: внутренний и внешний. Внутренние отступы нужны для того, чтобы создать границу между блоком и его содержимым. В целом она и так имеется, но текст или картинки могут прилипать к самой крайней границе блока, в котором они находятся. Для решения этой проблемы и были придуманы отступы. Давайте рассмотрим простой пример, в котором у нас какой-то текст помещен в обычный div с рамками:
|
1 2 3 4 5 |
<div style="border: 1px solid #000;"> Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не "прилипали" друг к другу. </div> |
Как видите текст внутри прилипает с левой стороны. Внутренний отступ описан с помощью свойства padding. Для использования отступа только с левой стороны используем одну из вариацией — padding-left. Дополняем наш код, добавляя в него новое свойство:
|
1 2 3 4 5 6 7 |
<div style="border: 1px solid #000; padding-left: 10px;"> Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не "прилипали" друг к другу. </div> |
Смотрим как поменялся на блок:
В целом стало гораздо лучше. Теперь давайте попробуем увеличить отступ до 15px и уберем интерпретацию -left:
|
1 2 3 4 5 6 |
<div style="border: 1px solid #000; padding: 15px;"> Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не "прилипали" друг к другу. </div> |
Отлично! Теперь отступы со всех сторон одинаковые. Однако, бывают ситуации, когда необходимо настроить каждую сторону по отдельности. Мы помним про интерпретацию -left и да, для каждой стороны есть свое свойство:
- padding-left
- padding-right
- padding-bottom
- padding-top
Но есть еще одна конструкция, которая экономит вам строки и проводит настройку в одной строке. Модифицируем наш код следующим образом:
|
1 2 3 4 5 |
<div style="border: 1px solid #000; padding: 30px 25px 20px 5px;"> Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не "прилипали" друг к другу. </div> |
Итак, что изменилось? Мы использовали свойство padding и прописали для каждой стороны свои параметры отступов. Пробежимся по каждому из них, чтобы понять к какой стороне относится значение:
- 30px — сверху
- 25px — справа
- 20px — снизу
- 5px — слева
С этим разобрались. Бывают ситуации, когда необходимо, чтобы сверху и снизу был один отступ, и справа/слева был другой отступ. Тогда можно поступить вот так:
|
1 2 3 4 5 |
<div style="border: 1px solid #000; padding: 50px 30px;"> Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не "прилипали" друг к другу. </div> |
В таком случае первое значение будет применяться к верхней и нижней части блока, а второй к левой и правой:
С padding — ом мы закончили. Перейдем к свойству, которое создаем отступы между блоками.
Внешний отступ
Это свойство называется Margin. У него так же есть возможность использования аналогичным свойств, как и у padding. То есть настройка только двух сторон, настройка всех четырех сторон совместно и по отдельности. Давайте рассмотрим его работу на примере. Создадим 2 пустых блока с фиксированной шириной и высотой:
|
1 2 3 4 |
<div style="width: 50px; height: 50px; border: 1px solid #000"> </div> <div style="width: 50px; height: 50px; border: 1px solid #000"> </div> |
Сейчас они находятся слишком близко друг к другу. Давайте добавим свойство Margin-top: 5px для нижнего блока:
|
1 2 3 4 |
<div style="width: 50px; height: 50px; border: 1px solid #000"> </div> <div style="width: 50px; height: 50px; border: 1px solid #000; margin-top: 5px;"> </div> |
Теперь образовался отступ. Рассмотрим пример бокового отступа:
|
1 2 3 4 |
<div style="width: 50px; height: 50px; border: 1px solid #000; display: inline-block;"> </div> <div style="width: 50px; height: 50px; border: 1px solid #000; display: inline-block;"> </div> |
Добавим margin для обоих блоков по 5px, для левого margin-right, для левого margin-left:
|
1 2 3 4 |
<div style="width: 50px; height: 50px; border: 1px solid #000; display: inline-block; margin-right: 5px;"> </div> <div style="width: 50px; height: 50px; border: 1px solid #000; display: inline-block; margin-left: 5px;"> </div> |
Отлично. Теперь оставим свойство margin в его стандартном виде и добавим блоки сверху и снизу:
|
1 2 3 4 5 6 7 8 |
<div style="width: 50px; height: 50px; border: 1px solid #000; margin: 5px"> </div> <div style="width: 50px; height: 50px; border: 1px solid #000; display: inline-block; margin: 5px;"> </div> <div style="width: 50px; height: 50px; border: 1px solid #000; display: inline-block; margin: 5px;"> </div> <div style="width: 50px; height: 50px; border: 1px solid #000; margin: 5px;"> </div> |
Теперь каждый из блоков имеет отступ в 5px с каждой стороны.
Итог
Отступы обязательное свойство, которое должно быть на сайте. Внутри блока или снаружи, это всегда красиво форматирует элементы на странице. Больше добавить нечего, спасибо за внимание, надеемся, что статья вам помогла освоить отступы в css! Если у вас остались вопросы — милости просим, пишите их в комментариях и не забывайте про нашу группу в ВК, канал на ютубчике и телегу!