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

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

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

  • margin-top: отступ сверху

  • margin-bottom: отступ снизу

  • margin-left: отступ слева

  • margin-right: отступ справа

 

 

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
            div{
                margin-top: 30px; /* отступ сверху */
                margin-left: 25px; /* отступ слева */
                margin-right: 20px; /* отступ справа */
                margin-bottom: 15px; /* отступ снизу */
                 
                border: 3px solid red; /* граница */
            }
        </style>
    </head>
    <body>
        <div>
            <p>Первый блок</p>
        </div>
        <div>
            <p>Второй блок</p>
        </div>
        <div>
            <p>Третий блок</p>
        </div>
    </body>
</html>

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

 

Можно вместо четырех свойств задать одно:

div{
    margin: 30px 20px 15px 25px;
     
    border: 3px solid red;
}

Свойство задается в формате:

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

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

div{
    margin: 25px;
}

В этом случае для всех четырех отступов будет использоваться 25 пикселей.

Для установки отступов можно использовать точные значения в пикселях (px) или em, либо процентные отношения, либо значение auto (автоматическая установка отступов).

Например:

margin-left: 2em;

Значение 2em определяет расстояние, которое в два раза больше размера шрифта элемента. При использовании процентов веб-браузеры вычисляют размер отступов на основе ширины элемента-контейнера, в который заключен стилизуемый элемент. В то же время, если несколько элементов у нс соприкасаются, то браузер выбирает наибольший отступ элемента, который затем и используется. Так, выше в примере использовался следующий стиль:

div{
    margin-top: 30px; /* отступ сверху */
    margin-left: 25px; /* отступ слева */
    margin-right: 20px; /* отступ справа */
    margin-bottom: 15px; /* отступ снизу */
}

Между первым и вторым блоками расстояние будет равно 30 пикселям - значение свойства margin-top второго блока div, несмотря на то, что у первого блока div имеется свойство margin-bottom, равное 15 пикселям.

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

Нетология

TemplateMonster

geekbrains.ru/

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

Google+