Padding css внутренние отступы блока

Что такое padding? Padding это внутренний отступ блока. Очень полезное свойство css!

Внутренний отступ в блоке - padding

1. Что такое padding?
2. Как используется padding
3. Пример использования padding-top
4. Пример использования padding-left
5. Пример использования padding-bottom
6. Пример использования padding-right
7. Примеры использования padding с классом, ид, css.

Что такое padding?

Свойство padding - это внутренний отступ блока. Если у блока padding-а нет, то мы увидим вот такую картину:



Как увидеть/узнать padding блока?

Создадим блок со свойством padding, и добавим ему бордюр:

<div style="padding: 20px;border: 1px solid;">padding</div>

Смотрим:

padding

Нажимаем по нашему блоку ПКМ - исследовать элемент.

Обращаю ваше внимание на то, что цвет выделенного паддинга - зеленый, а у margin - желтый

Нажмите, чтобы открыть в новом окне.




Как используется padding

Ниже приведено, как может использоваться 4 фида паддинга (слева) и чему это свойство рано, если использовать без сторон(лево, право, верх, низ)

padding-top: 20px; = padding: 20px 0 0 0;

padding-right: 20px; = padding: 0 20px 0 0;

padding-bottom: 20px; = padding: 0 0 20px 0;

padding-left: 20px; = padding: 0 0 0 20px;

Создадим блок без паддинга :

Html:

<div style="border: 1px solid;">no padding</div>

Результат:
no padding

Как видим... довольно скучная история, нигде нет отступов и выглядит не презентабельно!

Давайте попробуем добавить padding сверху!




Пример использования padding-top

Давайте добавим нашему блоку "padding-top:20px;"

Html:

<div style="border: 1px solid; padding-top:20px;"> padding-top = 20px</div>

Результат:

padding-top = 20px
Что получилось:

Как видим, наш текст отодвинулся от верха блока на значение - "padding-top:20px;"

Нажмите, чтобы открыть в новом окне.


Пример padding:20px 0 0 0

Если бы мы записали наш отступ таким образом:

padding:20px 0 0 0
Html:
<div style="border: 1px solid; padding:20px 0 0 0;">padding:20px 0 0 0;</div>

То получим аналогичный результат:

padding:20px 0 0 0;



Пример использования padding-left

Чтобы было, как-то повеселее... возьмем выше приведенный блок и добавим ему отступ слева :

Html:
<div style="border: 1px solid; padding-top:20px;padding-left:20px;"> padding-top = padding-left = 20px</div>
Результат:
padding-top = padding-left = 20px
Нажмите, чтобы открыть в новом окне.


Пример padding:20px 0 0 20px

Теперь, сделаем аналогичную запись, чуть короче:

padding:20px 0 0 20px
Html:
<div style="border: 1px solid; padding:20px 0 0 20px;">padding:20px 0 0 0;</div>

То получим аналогичный результат:

padding:20px 0 0 20px;



Пример использования padding-bottom

Пойдем уже проделанной дорожкой. Добавим padding-bottom нашему блоку :

Html:
<div style="border: 1px solid; padding-top:20px;padding-left:20px;padding-bottom:20px;"> padding-top = padding-left = padding-bottom = 20px </div>
Результат:
padding-top = padding-left = padding-bottom = 20px
Нажмите, чтобы открыть в новом окне.


Пример padding:20px 0 20px 20px

Теперь, сделаем аналогичную запись, чуть короче:

padding:20px 0 20px 20px
Html:
<div style="border: 1px solid; padding:20px 0 20px 20px;">padding:20px 0 20px 20px;</div>

То получим аналогичный результат:

padding:20px 0 20px 20px;



Пример использования padding-right

Я думаю, что уже к 6 пункту, вы примерно должны были понять, как работает padding.

А вот padding-right, в браузере вы никак не увидите. опка в блоке не будет хотя бы один перенос!

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
Вопрос на засыпку...

почему справа, визуально, отступ больше чем в других, соседних трех padding-ах!?

Пример padding:20px 20px 20px 20px

Теперь, сделаем аналогичную запись, чуть короче:

padding:20px 20px 20px 20px
Html:
<div style="border: 1px solid; padding:20px 20p 20px 20px;">padding:20px 20px 20px 20px;</div>

То получим аналогичный результат:

padding:20px 20px 20px 20px;
Этот вариант можно записать еще короче! Html:
<div style="border: 1px solid; padding:20px;">padding:20px;</div>

То получим аналогичный результат:

padding:20px;



Примеры использования padding с классом, ид, css.

Выше мы использовали padding внутри тега style.

1). Использование класса и стилей для padding

Кроме этого способа, есть способы использования padding с классом(class), ид(id), и в css.

Html + тег style

<style>.example {border:1px solid red;padding : 20px;}</style>

<div class="example">Здесь текст</div>

Пример padding с классом и стилями.

Здесь текст

2). Использование класса и css для padding

Размещаем класс в файле css

.example {border:1px solid red;padding : 20px;}
Html аналогичный:

<div class="example">Здесь текст</div>

Результат :

Здесь текст