Заметки сисадмина » Чем отличаются padding и margin

Заметки сисадмина о интересных вещах из мира IT, инструкции и рецензии. Настраиваем Компьютеры/Сервера/1С/SIP-телефонию в Москве

Чем отличаются padding и margin

2023-06-07 · Posted in HTML

Представьте слово HTML внутри тега <span>.

У этого элемента есть пока невидимая граница border. Если мы отобразим эту границу, то увидим, что она прилипла к тексту.

А если поставим два таких элемента рядом, они почти прилипнут друг к другу, потому что между ними нет пространства:

Padding

Чтобы отодвинуть рамку нужен padding — внутреннее пространство между содержимым элемента и его границей border.

Padding — внутренний отступ.

Вот padding: 0px:

padding можно задать отдельно сверху, справа, снизу и слева (то есть по часовой стрелке, начиная сверху). Или задать отдельно для верха-низа и право-лево, или вообще одинаковый для всех сторон.

Или даже все стороны по отдельности — вот так. Это аналог выражения padding: 10px 20px 30px 40px;

Все варианты padding одной картинкой:

Margin

margin — пространство от border, padding или контента до соседних элементов. Задаётся по такой же логике и тоже по часовой стрелке.

margin — внешний отступ.

margin тоже можно задавать отдельно для всех сторон или сделать сразу одинаковым.

Внутренние и внешние отступы одной картинкой:

Leave a Reply