В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
padding (3)
css (131)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

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.

  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>

    Результат :

    Здесь текст
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.019022 секунд. Подробнее