Сначала напомню читателям, о чём речь.
Падинги (свойство padding) — это внутренние отступы от границ элемента до его содержимого. Маржины (свойство margin) — это внешние отступы от границ элемента до соседних элементов.
Я советую использовать свойства по их прямому назначению.
Когда использовать падинги
Падинги используют, когда нужно отодвинуть содержимое от границ элемента:
<style>
p {
padding-left: 9px;
padding-top: 18px;
padding-bottom: 27px;
}
</style>
<body>
<p>
How doth the little crocodile
<br>Improve his shining tail,
<br>And pour the waters of the Nile
<br>On every golden scale!
</p>
</body>
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
Падинги не изменятся при изменении размеров содержимого, вёрстка получается гибкой и адаптивной:
<style>
p {
padding-left: 9px;
padding-top: 18px;
padding-bottom: 27px;
font-size: 150%;
line-height: 150%;
}
</style>
<body>
<p style="font-size: 150%; line-height: 150%;">
How doth the little crocodile
<br>Improve his shining tail,
<br>And pour the waters of the Nile
<br>On every golden scale!
</p>
</body>
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
Фон элемента учитывает падинги, это удобно при вёрстке карточек:
<style>
p {
padding-left: 9px;
padding-top: 18px;
padding-bottom: 27px;
font-size: 150%;
line-height: 150%;
background-color: #f3f3f3;
}
</style>
<body>
<p>
How doth the little crocodile
<br>Improve his shining tail,
<br>And pour the waters of the Nile
<br>On every golden scale!
</p>
</body>
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
Когда использовать маржины
Маржины — это любые расстояния между элементами. Например, отступы от заголовка до текста и между абзацами:
<style>
h1 {
margin-bottom: 35px;
}
p:not(:last-child) {
margin-bottom: 27px;
}
</style>
<body>
<h1>How doth the little crocodile</h1>
<p>
How doth the little crocodile
<br>Improve his shining tail,
<br>And pour the waters of the Nile
<br>On every golden scale!
</p>
<p>
How cheerfully he seems to grin,
<br>How neatly spread his claws,
<br>And welcome little fishes in
<br>With gently smiling jaws!
</p>
</body>
How doth the little crocodile
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
How cheerfully he seems to grin,
How neatly spread his claws,
And welcome little fishes in
With gently smiling jaws!
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
Когда использовать всё вместе
Маржины и падинги можно и нужно комбинировать. Чтобы не задавать каждому внутреннему элементу отступ до края карточки, можно один раз задать внутренние отступы самой карточке:
<style>
.card {
padding: 27px 18px 45px;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
}
h1 {
margin-bottom: 35px;
}
p:not(:last-child) {
margin-bottom: 27px;
}
</style>
<body>
<div class="card">
<h1>How doth the little crocodile</h1>
<p>
How doth the little crocodile
<br>Improve his shining tail,
<br>And pour the waters of the Nile
<br>On every golden scale!
</p>
<p>
How cheerfully he seems to grin,
<br>How neatly spread his claws,
<br>And welcome little fishes in
<br>With gently smiling jaws!
</p>
</div>
</body>
How doth the little crocodile
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
How cheerfully he seems to grin,
How neatly spread his claws,
And welcome little fishes in
With gently smiling jaws!
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
Использование не по назначению
ЦСС — свободный язык и прощает использование маржинов и падингов бессистемно и не по назначению. Никто не запретит вам задавать падингами внешние отступы, а маржинами — внутренние. Но так вёрстка быстро потеряет гибкость, начнёт вести себя непредсказуемо, работать с ней станет сложнее. Поэтому я рекомендую использовать свойства по назначению.
Конечно, бывают исключения. Если вы уверены, что нарушение правил пойдёт на пользу вёрстке и тем, кто с ней работает, — пожалуйста. Любые правила не обязательно соблюдать, но очень важно понимать :‑)
См. также:
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.