В этом посте мы рассмотрим атрибут padding которые делает
отступы внутри блока или внутри чего либо, рассмотрим все его возможные
значения, рассмотрим примеры, я покажу вам наглядный пример (скриншоты)
что бы все поняли как и с чем он применяется.
1 # Возможные значения
padding:20px - Отступ внутри сверху,справа,снизу,слева в 20 пикселей.
padding-left - Отступ слева.
padding-right - Отступ справа.
padding-bottom - Отступ снизу.
padding-top - Отступ сверху.
padding: 2px 4px - Отступ сверху и низу 2 пикс. справа и слева 4 пикс.
2 # Примеры
Code
<style>
h1 {background:red;color:#fff;}
h2 {background:green;color:#fff;}
</style>
<h1>1 Блок</h1>
<h2>2 блок</h2>
Результат:
Теперь добавим
padding:
Code
<style>
h1 {background:red;color:#fff;padding:8px;}
h2 {background:green;color:#fff;padding:8px;}
</style>
<h1>1 Блок</h1>
<h2>2 блок</h2>
Результат:
Как мы видим у нас отступы внутри текста увеличились, вот так работает padding.