CSS — Отступы

CSSСегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не «прилипали» друг к другу.

CSS — Отступы

Внутренний отступ

Есть 2 вида отступов: внутренний и внешний. Внутренние отступы нужны для того, чтобы создать границу между блоком и его содержимым. В целом она и так имеется, но текст или картинки могут прилипать к самой крайней границе блока, в котором они находятся. Для решения этой проблемы и были придуманы отступы. Давайте рассмотрим простой пример, в котором у нас какой-то текст помещен в обычный div с рамками:

Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не «прилипали» друг к другу.

Как видите текст внутри прилипает с левой стороны. Внутренний отступ описан с помощью свойства padding. Для использования отступа только с левой стороны используем одну из вариацией — padding-left. Дополняем наш код, добавляя в него новое свойство:

Смотрим как поменялся на блок:

Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не «прилипали» друг к другу.

В целом стало гораздо лучше. Теперь давайте попробуем увеличить отступ до 15px и уберем интерпретацию -left:

Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не «прилипали» друг к другу.

Отлично! Теперь отступы со всех сторон одинаковые. Однако, бывают ситуации, когда необходимо настроить каждую сторону по отдельности. Мы помним про интерпретацию -left и да, для каждой стороны есть свое свойство:

  • padding-left
  • padding-right
  • padding-bottom
  • padding-top

Но есть еще одна конструкция, которая экономит вам строки и проводит настройку в одной строке. Модифицируем наш код следующим образом:

Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не «прилипали» друг к другу.

Итак, что изменилось? Мы использовали свойство padding и прописали для каждой стороны свои параметры отступов. Пробежимся по каждому из них, чтобы понять к какой стороне относится значение:

  • 30px — сверху
  • 25px — справа
  • 20px — снизу
  • 5px — слева

С этим разобрались. Бывают ситуации, когда необходимо, чтобы сверху и снизу был один отступ, и справа/слева был другой отступ. Тогда можно поступить вот так:

В таком случае первое значение будет применяться к верхней и нижней части блока, а второй к левой и правой:

Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров, но мы считаем, что им необходима своя страница на нашем сайте. Отступы нужны для того, чтобы создать презентабельный вид вашим страницам и чтобы элементы не «прилипали» друг к другу.

С padding — ом мы закончили. Перейдем к свойству, которое создаем отступы между блоками.

Внешний отступ

Это свойство называется Margin. У него так же есть возможность использования аналогичным свойств, как и у padding. То есть настройка только двух сторон, настройка всех четырех сторон совместно и по отдельности. Давайте рассмотрим его работу на примере. Создадим 2 пустых блока с фиксированной шириной и высотой:

Сейчас они находятся слишком близко друг к другу. Давайте добавим свойство Margin-top: 5px для нижнего блока:

Теперь образовался отступ. Рассмотрим пример бокового отступа:

Добавим margin для обоих блоков по 5px, для левого margin-right, для левого margin-left:

Отлично. Теперь оставим свойство margin в его стандартном виде и добавим блоки сверху и снизу:

Теперь каждый из блоков имеет отступ в 5px с каждой стороны.

Итог

Отступы обязательное свойство, которое должно быть на сайте. Внутри блока или снаружи, это всегда красиво форматирует элементы на странице. Больше добавить нечего, спасибо за внимание, надеемся, что статья вам помогла освоить отступы в css! Если у вас остались вопросы — милости просим, пишите их в комментариях и не забывайте про нашу группу в ВК, канал на ютубчике и телегу!

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

Опиши свой кейс здесь, если у тебя остались вопросы и мы обязательно ответим...