Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

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

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

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

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

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

    Смотрим:

    padding

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

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

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Смотрим:

  2. Как используется 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 сверху!

  3. Пример использования 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-top

    Пример 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;

  4. Пример использования 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-left

    Пример 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;

  5. Пример использования 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-bottom

    Пример 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;

  6. Пример использования 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;

  7. Примеры использования 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>

    Результат :

    Здесь текст


Вас может еще заинтересовать список тем : #CSS | #CSS_PROPERTY |
Последняя дата редактирования : 2020-11-29 11:41
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Padding

Последние комментарии :
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.
Марат :
23/11/2020 07:38
Приходите ещё!
подробнее.
Лило :
23/11/2020 06:34
Благодарю, удобно
подробнее.
Марат :
15/11/2020 01:57
Здесь отвечал...1) Есть вот комментарии от вконтактае, очень простые 2)Такое же есть от мордокниги, 3) смотрите…
подробнее.