Css отступ вниз: margin-top | htmlbook.ru

.container {
    background-color:orange;
    width:320px;
    border:1px solid black;
}
div {
    width:320px;
    background-color:gold;
}

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 5 дек. 2022 г. by MDN contributors.

Вёрстка слева направо и сверху вниз

Модули в вёрстке обычно идут друг за другом и имеют внешние отступы. В ЦСС внешние отступы задают свойством margin:

.module {
  margin-left: 9px;
  margin-top: 18px;
  margin-bottom: 27px;
  margin-right: 9px;
}

Внешние отступы в ЦСС не суммируются, а схлопываются. Если у двух соседних модулей заданы отступы между собой, то применится наибольший из них

Иногда в отступах нет системы, их задают так, как удобнее в конкретный момент для конкретного модуля. Один модуль может иметь отступы в одну сторону, другой — в другую, а то и сразу в несколько сторон:

Внешние отступы в ЦСС не суммируются, а схлопываются. Если у двух соседних модулей заданы отступы между собой, то применится наибольший из них

.textBox {
  margin-top: 27px;
}
.textBox p {
  margin-top: 9px;
  margin-bottom: 9px;
}
.textBox ul {
  margin-bottom: 18px;
}
.nav a {
  margin-left: 4.5px;
  margin-right: 4.5px;
}

Когда в отступах нет системы, вёрстку становится сложнее понимать, поддерживать и развивать. Работу кода трудно представить без подглядывания в браузер. Новые модули слипаются с существующими, приходится каждый раз подкручивать отступы, чтобы всё работало как надо. Начинается путаница, появляются баги.

Правило: слева направо, сверху вниз

Я советую всегда выстраивать модули слева направо и сверху вниз, а отступы задавать соответственно этим направлениям: все вертикальные отступы делать через нижний отступ, все горизонтальные — через правый отступ:

.textBox {
  margin-bottom: 27px;
}
.textBox p {
  margin-bottom: 9px;
}
.textBox ul {
  margin-bottom: 18px;
}
.nav a {
  margin-right: 9px;
}

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

Отступы только для последних элементов

При вёрстке слева направо и сверху вниз отступы должны быть у всех модулей, кроме последних. Если в меню пять пунктов, то отступы вправо должны быть только у четырёх первых, лишний отступ у пятого ни к чему и может сломать соседние модули.

Обычно ненужные отступы последних модулей убирают в два шага. Сначала задают отступы для всех модулей, а затем обнуляют у последнего:

ul li {
  margin-bottom: 9px;
}
ul li:last-child {
  margin-bottom: 0;
}

Удобнее и проще использовать :not в комбинации с :last-child. Результат будет такой же, а кода станет меньше:

ul li:not(:last-child) {
  margin-bottom: 9px;
}

Исключения

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

Ещё одно исключение: если направление чтения сайта отличается от привычного. Тогда может быть удобнее изменить и направления построения вёрстки и отступов.

О тупых правилах

В целом, правило «слева направо, сверху вниз» можно использовать как «тупое правило» — то есть просто соблюдать всегда. Потому что когда вы столкнётесь с ситуацией‑исключением, то сами сразу это поймёте.

О тупых правилах

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка

Свежак

Свойство заполнения CSS

❮ Назад Полное руководство по CSS Далее ❯

Пример

Установите отступ для всех четырех сторон элемента

равным 35 пикселям:

p {
  padding: 35px;
}

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Отступ элемента — это пространство между его содержимым и его границей.

Свойство padding является сокращенным свойством для:

• обивка
• заполнение справа
• набивка-дно
• заполнение слева

Примечание: Padding создает дополнительное пространство внутри элемента, а margin создает дополнительное пространство вокруг элемента.

Это свойство может иметь от одного до четырех значений.

Если свойство padding имеет четыре значения:

• padding:10px 5px 15px 20px;
  • верхний отступ 10px
  • правое заполнение 5px
  • нижний отступ 15px
  • левый отступ составляет 20 пикселей

Если свойство padding имеет три значения:

• padding:10px 5px 15px;
  • верхний отступ 10px
  • правое и левое заполнение 5px
  • нижний отступ 15px

Если свойство padding имеет два значения:

• padding:10px 5px;
  • верхний и нижний отступы 10px
  • правое и левое заполнение 5px

Если свойство padding имеет одно значение:

• padding:10px;
  • все четыре отступа 10px

Примечание: Отрицательные значения не допускаются.

Показать демо ❯

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Синтаксис CSS

padding: length |initial|inherit;

Значения свойств

Значение	Описание	Демо
длина	Задает отступ в px, pt, cm и т. д. Значение по умолчанию — 0. Прочтите о единицах длины	Демонстрация ❯
%	Задает заполнение в процентах от ширины содержащего элемента	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о начальный
наследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

Пример

Установите отступ для элемента

на 35 пикселей сверху и снизу и на 70 пикселей. пикселей для правого и левого:

p {
  padding: 35px 70px;
}

Пример

Установите отступ для элемента

p {
  padding: 35px 70px 50px;
}

Пример

Установите отступ для элемента

на 35 пикселей вверху, 70 пикселей справа, 50 пикселей внизу и до 90 пикселей слева:

p {
  padding: 35px 70px 50px 90px;
}

Связанные страницы

Учебник CSS: CSS Padding

Учебник CSS: CSS Box Model

HTML DOM reference: padding свойство

❮ Предыдущий Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Основные каталожные номера

Основные примеры

ФОРУМ | О

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство CSS padding-block

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Установите отступы с обеих сторон в направлении блока:

p {
  padding-block: 35px;
}

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Блок заполнения элемента — это пространство от его границы до его содержимого в направлении блока, и это сокращенное свойство для следующих свойств:

• начало блока заполнения
• конец подкладочного блока

Значения свойства padding-block могут быть установлены различными способами:

Если свойство padding-block имеет два значения:

• padding-block: 10px 50px;
  • отступ в начале составляет 10 пикселей
  • отступ в конце 50px

Если свойство padding-block имеет одно значение:

• padding-block: 10px;
  • отступы в начале и в конце 10px

УС колодка и свойства padding-inline очень похожи на свойства CSS набивка-верх , прокладка-дно , padding-left и padding-right , но колодка и свойства padding-inline зависят от блочного и встроенного направлений.

Примечание: Связанное свойство CSS режим записи определяет направление блока. Это влияет на то, где находится начало и конец блока, а также на результат свойства padding-block . Для страниц на английском языке направление блока — вниз, а направление строки — слева направо.

Показать демо ❯

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Синтаксис CSS

padding-block: auto| значение |начальное|наследовать;

Значения свойств

Значение	Описание	Демо
авто	По умолчанию. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт