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

Оцените материал
(0 голосов)

Здравствуйте! На прошлом уроке мв разбирались с  внешними полями в 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;
}

Прочитано 701 раз Последнее изменение Суббота, 23 июля 2016 11:56
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+