Внутренние отступы

Внутренние отступы

Здравствуйте! На прошлом уроке мв разбирались с  внешними полями в CSS.  На этом уроке поговорим о внутренних отступах Свойство padding задает внутренние отступы от границы элемента до его внутреннего содержимого. Как и для свойство margin, в CSS имеются четыре свойства, которые устанавливают отступы для каждой из сторон:

  • padding-top: отступ сверху
  • padding-bottom: отступ снизу
  • padding-left: отступ слева
  • padding-right: отступ справа

Внутренние отступы

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
            div.outer{
                 
                margin: 25px;
                 
                padding-top:30px;
                padding-right: 25px;
                padding-bottom: 35px;
                padding-left: 28px;
                 
                border: 2px solid red;
            }
            div.inner{
                 
                height: 50px;
                background-color:blue;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>

Просмотреть  пример

Для установки значения отступов, как и в margin, могут применяться либо конкретные значения в пикселях, так и процентные значения (относительно размеров элементов).

Для записи отступов также можно использовать сокращенную запись:

padding: отступ_сверху отступ_справа отступ_снизу отступ_слева;

Например:

div.outer{
                 
    margin: 25px;
     
    padding: 30px 25px 35px 28px;
                 
    border: 2px solid red;
}

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

div.outer{
                 
    margin: 25px;
     
    padding: 30px;
                 
    border: 2px solid red;
}

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Читайте также  Как сделать видео в качестве фона сайта

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: