CSS margin и padding

По кнопкам "Купить бумажную книгу" или "Купить электронную книгу" можно купить в официальных магазинах эту книгу, если она имеется в продаже, или похожую книгу. Результаты поиска формируются при помощи поисковых систем Яндекс и Google на основании названия и авторов книги.

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

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


Различия между margin и padding в CSS

Данная статья посвящена различиям между margin и padding в CSS.

padding – это отступ от внутренней границы элемента до его содержания
border - это рамка элемента
margin – это отступ от внешней границы элемента до соседнего элемента

Значения свойств margin и padding могут быть заданы отдельно для каждой стороны, при помощи следующих свойств CSS:
margin-top, margin-right, margin-bottom, margin-left
padding-top, padding-right, padding-bottom, padding-left


margin, padding и border это все части блочной модели (Box Model)

Блочная модель выглядит так:
1. в центре находится область содержимого, контента
2. ее окружает padding
3. далее их окружает border
4. и в конце их всех окружает margin

Вот эта модель:

margin блок
border блок
padding блок
блок элемента (содержимое, контент)


например CSS, код:
h6 {
background-color: #0DE817;
margin: 1px 10px 5px 0;
padding: 1em;
}

Который выглядит так:
Hello World


Запись значений отступов margin и padding

запись значений для сторон осуществляется по часовой стрелке:
1 – сверху
2 – справа
3 – снизу
4 – слева

Например:
padding: 0 10px 0 10px;
margin: 8px 8px 8px 8px;

Существует короткая запись для вышеуказанных значений:

padding: 0 10px; /* верхний и нижний отступы - 0; правый, левый отступы по 10px */
margin: 8px; /* все отступы по 8px */
Дата публикации:






Теги: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::


 


 

Книги, учебники, обучение по разделам




Не нашёл? Найди:





2025-04-29 06:28:33