Css margin background: background-position — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

CSS свойство padding

❮ Назад Вперед ❯

Свойство padding задает отступы со всех сторон контента элемента.

Значения свойства устанавливаются с помощью единиц измерения длины или процентов.

Отрицательные значения недопустимы.

CSS padding — это сокращенная форма записи для следующих свойств:

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

Можно использовать padding для всех сторон:

Свойство padding может быть указано, используя одно, две, три или четыре значения:

  • Если указаны четыре значения, первое устанавливает верхнюю сторону, второе — правую, третье — нижнюю, и четвертое — левую сторону.
  • Если указаны три значения, первое устанавливает верхнюю сторону, второе — правую и левую, а третье — нижнюю сторону.
  • Если указаны две значения, первое устанавливает верхнюю и нижнюю, а второе правую и левую сторону.
  • Если указано одно значение, оно применяется для четырех сторон.
padding: length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px 20px 40px;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства padding</h3>
    <p>Параграф с применением свойств background-color, color и padding.</p>
  </body>
</html>

Попробуйте сами!

Код в вышеприведенном примере означает, что отступ сверху должен быть 20px, справа — 40px, снизу — 20px, а слева — 40px.

Рассмотрим другой пример, где отступ указан в процентах:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 5% 10% 10% 5%;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства padding</h3>
    <p>Параграф с применением свойств background-color, color и padding.
  </p>
  </body>
</html>

Попробуйте сами!

Пример, где указаны две значения. Первое устанавливает верхнюю и нижнюю сторону, а второе — правую и левую:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства padding</h3>
    <p>Параграф с применением свойств background-color, color и padding.</p>
  </body>
</html>

Попробуйте сами!

css властивість margin-top

  • Головна
  • css
  • властивості
  • margin-top

CSS властивість margin-top встановлює відступ від верхнього краю елемента.

Відстань встановиться від верхнього краю поточного елемента до внутрішнього краю батьківського елемента.

Властивість може отримувати в якості значення, як довжину так і відсотки та ключове слово auto. Значення може бути від’ємне. У цьому випадку елементу буде розташований ближче до сусідніх елементів.

Зона для margin знаходиться поза межами(border

), які в свою чергу знаходяться поза полями(padding).

Нотатка:

Вертикальні відступи двох елементів можуть об’єднуватися.

Нотатка:

Ця властивість не впливає на незамінні вбудовані елементи, такі як <tt>, <span> чи <code>. Застосовується до всіх елементів, крім елементів із типами відображення таблиці, відмінними від table-caption, table і inline-table. Вона також не впливає на ::first-letter та ::first-line.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

margin-top: length|auto|initial|inherit;

Властивість margin-top може отримувати 4 значення:

length

Величину верхнього відступу можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути додатнім та від’ємним.

auto

Вказує, що розмір відступів буде автоматично розрахований браузером.

initial

Встановлює цю властивість в значення без задання

inherit

Успадкує значення властивості від свого батьківського елемента

Значення без задання:0
Наслідує:Ні
Анімується:Так
JavaScript синтаксис:object.style.marginTop=»100px»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
margin-top

1. 0

6.0

1.0

1.0

3.5

Переглядач
margin-top

1.0

1.0

1.0

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3
  • Приклад 4

Динамічний приклад

Демонстрація роботи властивості
Найпростіший приклад використання css властивості margin-top
Зараз ми встановили верхній відступ в 2см. 
p {


    margin-top: 2cm;


}
Додаткові посилання
padding
margin
margin-right
padding-top
padding-right
padding-left
padding-bottom
margin-left
margin-bottom
 html — Почему поле не заполняется фоновым цветом в CSS? 
 У меня есть простой HTML-код.
 Почему цвет фона не заполняет весь фон элемента  #footer , в частности, включая поля?
 

<голова>
  <стиль>
    #нижний колонтитул {
      фон: #263238;
      поле: 100 пикселей;
      заполнение: 0;
    }
    .нижний колонтитул {
      маржа: 0;
      цвет: #fff;
    }
  
  
<тело>
  <дел>
    
Все права защищены © 2016
  • HTML
  • CSS
  • поля

3

Вы должны использовать padding вместо margin , как описано в блочной модели CSS.

  • Margin обеспечивает пространство за полем элемента, и поэтому не будет окрашенным — это просто пространство.

  • Прокладка, с другой стороны, обеспечивает пространство вокруг внутри блока элемента, окрашен и подвержен влиянию других стилей.

 

  
  <голова>
     <стиль>
        #нижний колонтитул {
           фон: #263238;
           отступ: 100 пикселей;
        }
        .нижний колонтитул {
           маржа: 0;
           цвет: #fff;
        }
     
 

  
    
  <тело>
     <дел>
        
Все права защищены © 2016

1

Вот как работает блочная модель css. Фон применяется только к областям padding и content , поэтому вы не видите фон на полях. исправить просто, просто измените margin на padding .

Вы можете использовать дополнение .

Если вы можете использовать поле , тогда нужно оставить пространство за границей и отступ оставить пробел внутри границы. Так что это идеально подходит для вас, используя padding .

 #нижний колонтитул{фон: #263238; отступ: 100px;}
 .footer-text{поле: 0;цвет: #fff;} 
 

        
Все права защищены © 2016

Попробуйте указать border: 1px сплошной прозрачный для родительского элемента тега p.

 
    
        <голова>
           <стиль>
              #footer{фон: #263238;отступ: 100px;}
              .нижний колонтитул {поле: 0; цвет: #fff;}
           
        
        <тело>
            <дел>
                
Все права защищены © 2016

Поля применяются вне поля, а заполнение применяется внутри поля.

Вот пример полей/отступов.

http://www.goer.org/images/html/boxbasic.png

4

Margin не включается в Box-модель вашего div.

Вы добавляете отступ вместо полей. Это даст вам равномерный цвет в нижнем колонтитуле. вот так:

 #нижний колонтитул {
  фон: #263238;
  маржа: 0;
  отступ: 100 пикселей;
}

Но если вы ищете другой цвет снаружи, вы можете получить это, используя border следующим образом:

 #footer {
  фон: #263238;
  маржа: 0;
  заполнение: 0;
  граница: 100px сплошной зеленый цвет;
}

Теперь вы можете включить рамку в блочную модель, чтобы она не мешала структуре вашей страницы. Сделайте это, определив box-sizing для нижнего колонтитула.

 #нижний колонтитул {
  фон: #263238;
  маржа: 0;
  заполнение: 0;
  граница: 100px сплошной зеленый цвет;
  box-sizing:border-box;
}
 
 

  
  <голова>
     <стиль>
        #нижний колонтитул {
           фон: #263238;
           отступ: 100 пикселей;
        }
        . нижний колонтитул {
           маржа: 0;
           цвет: #fff;
        }
     
  
    
  <тело>
     <дел>
        
Все права защищены © 2016