Урок 10. Блочная модель

Здравствуй, уважаемый читатель.

Это десятый урок изучения CSS. В этом уроке мы рассмотрим что такое блочная модель, свойства margin и padding, а также высоту и ширину блока. Данный урок очень важен для дальнейшего понимания верстки и строения сайтов.

Перед изучением данного урока пройдите предыдущие уроки:

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование

Теория и практика

Вся html страница состоит из блоков <div>. Очень важно уметь управлять и изменять данные блоки. Об этом мы и поговорим сегодня. А начнем мы с отступов блоков, а точнее о свойствах margin и padding.

margin

Для примера возьмем код из прошлого примера:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        <div class="firstPar">
            <p>Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</p>
            <p>Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</p>
        </div>
        <div class="secondPar">
            <p>Cras</p>
            <ul>
                <li>amet condimentum</li>
                <li>aliquam volutpat</li>
                <li>elementum interdum</li>
            </ul>
        </div>
    </div>
</body>
</html>

А в CSS для каждого из блоков <div> пропишем разные границы:

#content{
    border:2px solid #FF0000; /* красная граница */
}
 
.firstPar{
    border:2px solid #0000FF; /* синяя граница */
}
 
.secondPar{
    border:2px solid #00FF00; /* зеленая граница */
}

Посмотрим как это выглядит в браузере:

Сейчас применим для блока <div class="firstPar"> свойство margin — внешние отступы. Что касается данного свойство оно как и граница может быть: margin-top, margin-right, margin-bottom и margin-left. А отступы задаются в пикселях(px). Также данное свойство может наследоваться от родителя. Давайте попробуем сделать отступ:

#content{
    border:2px solid #FF0000; /* красная граница */
}
 
.firstPar{
    border:2px solid #0000FF; /* синяя граница */
    margin-bottom:20px; /* отступ снизу в 20 пикселей */
}
 
.secondPar{
    border:2px solid #00FF00; /* зеленая граница */
}

Как это выглядит в браузере:

А сейчас попробуем поставить отступы сразу со всех сторон:

#content{
    border:2px solid #FF0000; /* красная граница */
}
 
.firstPar{
    border:2px solid #0000FF; /* синяя граница */
    margin:20px; /* отступы со всех сторон в 20 пикселей */
}
 
.secondPar{
    border:2px solid #00FF00; /* зеленая граница */
}

Как это выглядит в браузере:

В данном свойстве применяется очень часто сокращенная запись. Выглядит она следующим образом:

...
.firstPar{
    border:2px solid #0000FF; /* синяя граница */
    margin:20px 8px 15px 5px; /* отступы: сверху 20 пискелей, справа 8 пискелей, снизу 15 пикселей и слева 5 пикселей */
}
...

Давайте подробно рассмотрим данную запись:

Как видите первая цифра отвечает за отступ сверху, вторая — отступ справа, третья — отступ снизу и четвертая — отступ слева.

padding

Отступы бывают внешними и внутренними. Как вы уже знаете внешние задаются через свойство margin. Внутренние отступы задаются с помощью свойства padding.

Для примера возьмем код из прошлого примера:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        <div class="firstPar">
            <p>Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</p>
            <p>Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</p>
        </div>
        <div class="secondPar">
            <p>Cras</p>
            <ul>
                <li>amet condimentum</li>
                <li>aliquam volutpat</li>
                <li>elementum interdum</li>
            </ul>
        </div>
    </div>
</body>
</html>

И зададим для второго блока внутренний отступ в 20 пикселей(px):

#content{
	border:2px solid #FF0000; /* красная граница */
}
 
.firstPar{
	border:2px solid #0000FF; /* синяя граница */
	margin:20px; /* внешний отступ */
}
 
.secondPar{
	border:2px solid #00FF00; /* зеленая граница */
	padding:20px; /* внутренний отступ */
}

Как это выглядит в браузере:

Внутренние отступы можно как и внешние писать как сокращенно, так и полную запись. Сокращенная запись аналогично при margin. Т.е. «padding: 20px 10px 15px 20px;».

Сегодня мы рассмотрели свойства, которые отвечают за внутренние и внешние отступы. Рассмотрели как пишется сокращенная запись. Попробуйте написать примеры руками, пробуйте изменять свойства и посмотреть что получится! Если что-то непонятно — пишите в комментариях.