Блочная модель CSS

В этой главе:

  • Рамка

  • Внешний и внутренний отступы

  • Ширина и высота элемента

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

Блочная модель элемента

  • Margin (внешний отступ) - пустое пространство (поле), которое отделяет один элемент от другого. Самый простой пример внешнего отступа - промежуток между абзацами, идущими друг за другом. Область внешнего отступа прозрачна и не может иметь свой цвет и других эффектов оформления.
  • Border (рамка элемента) - граница с любой стороны элемента. Рамка может быть установлена как со всех сторон элемента, так и с одной стороны. Используя рамку можно просто красиво оформить элемент или визуально отделить содержимое текущего элемента от других элементов страницы.
  • Padding (внутренний отступ) - пустое пространство между содержимым элемента и его рамкой. Область внутреннего отступа прозрачна и не может иметь свой цвет или другие эффекты оформления.
  • У большинства элементов есть область содержимого, в которой располагается всесодержимое элемента (текст, вставляемые изображения или другие элементы).

Рамка

Рамка представляет собой обычную линию, которая отображается вокруг стилизуемого элемента. Но совсем не обязательно применять рамку, окружающую элемент со всех сторон. Можно добавить ее только с требуемой строны элемента. Например, если добаввить рамку только с нижней строны блочного элемента, то она будет производить тот же эффект, что и элемент <hr> (горизонтальная линия), выступая в качестве разделителя.

Каждая рамка имеет три свойства, которыми мы можем управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с помощью каких свойств можно их задавать и изменять:

  • border-width - задает ширину рамки. Для установки ширины можно использовать пиксели или ключевые слова: thin, medium, thick.

  • border-style - определяет стиль рамки с помощью одного из восьми возможных значений: solid, dotted, dashed, double, groove, ridge, inset и outset.

    возможные значения свойства border-style

  • border-color - указывает цвет рамки.

Вместо указания всех трех свойств, можно указать всего одно - свойство border, которое позволяет одновременно указать ширину, стиль и цвет для рамки.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.one {
        border-style: solid;
        border-width: 5px;
      }
      p.two {
        border-style: solid;
        border-width: medium;
        border-color: red;
      }
      p.three {
        border: 3px dashed #ffffff;
        background-color: #0000FF;
        color: #ffffff;
      }
    </style>
  </head>
 
  <body>
    <p class="one">Первый абзац.</p>
    <p class="two">Второй абзац.</p>
    <p class="three">Третий абзац.</p>
  </body>
</html>

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

  • border-top - верхняя рамка

  • border-left - левая рамка

  • border-right - правая рамка

  • border-bottom - нижняя рамка

Эти свойства работают точно так же, как и свойство border, с тем исключением, что позволяют управлять рамкой только с одной стороны стилизуемого элемента.

Внешний и внутренний отступы

Внутренний отступ - пустое пространство между содержимым элемента и его рамкой (если она установлена). Для добавления и управления шириной внутренних отступов со всех четырех сторон элемента используется свойство padding.

Внешний отступ - пустое пространство, отделяющее элемент от других элементов или краев окна браузера. Для добавления и управления шириной внешних отступов со всех четырех сторон элемента используется свойство margin.

Свойства padding и margin могут принимать от одного до четырех значений:

1
2
padding: 10px 15px 22px 18px;
margin: 10px 15px 22px 18px;

Где значения устанавливаются по часовой стрелке, начиная с верхнего:

порядок значений в свойстве padding
порядок значений в свойстве margin

Если у свойств указать всего одно значение, то отступы со всех сторон будут одинаковой ширины.

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p {
        border: 3px dashed #ffffff;
        background-color: #0066FF;
        color: #ffffff;
        padding: 15px; /*внутренний отступ для всех сторон*/
        margin: 25px;   /*внешний отступ для всех сторон*/
      }
    </style>
  </head>
 
  <body>
    <p>Обычный абзац.</p>
  </body>
</html>

Для отступов, так же как и для рамок, есть свойства позволяющие управлять размером отступа с каждой стороны отдельно. Внутренние отступы регулируются свойствами: padding-toppadding-rightpadding-bottom и padding-left. Внешние отступы регилируются свойствами: margin-top,margin-rightmargin-bottom и margin-left.

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

Ширина и высота элемента

По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width иheight.

CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:

описание работы CSS свойств height и width

Обратите внимание, что свойства width и height определяют размер только области содержимого, чтобы вычислить общую ширину блочного элемента, нужно сложить ширину области содержимого, левого и правого внутренних отступов и ширину левой и правой рамки. То же самое касается и общей высоты элемента, только все значения вычисляются по вертикали:

формула расчета общей высоты и ширины для элемента

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.first {
        width: 150px;
        height: 100px;
        background-color: #B2FFCC;
        padding: 0px/*обнуляем внутренние отступы*/
      }
      p.second {
        width: 150px;
        height: 100px;
        background-color: #C2FFFF;
        border: 5px ridge #0066FF;
        padding: 10px;
      }
    </style>
  </head>
 
  <body>
    <p class="first">Для данного абзаца зададим только ширину и высоту.</p>
    <p class="second">Этот абзац содержит, кроме ширины и высоты,
     внутренний отступ, рамку и внешний отступ.</p>
  </body>
</html>

В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца - 150x100px, а размеры второго - 180x130px (с учетом внутреннего отступа и рамки).

После того как вы определили для элемента ширину и высоту, стоит обратить внимание на один немаловажный момент - содержимое, расположенное внутри элемента, может превысить указанный размер блока. В этом случае часть содержимого будет выходить за границы элемента, чтобы избежать этого не приятного момента, можно воспользоваться свойством overflow. Свойство overflow сообщает браузеру, как нужно поступить в том случае, если содержимое блока превышает его размер. Это свойство может принимать одно из четырех значений:

  • visible - значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутстве установки свойства overflow.

  • scroll - добавляет к элементу полосы прокрутки по вертикали и горизонтали

  • auto - добавляет полосы прокрутки при необходимости

  • hidden - скрывает часть содержимого, которое выходит за границы блочного элемента

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div {
        width:150px;
        height:200px;
        border: 1px solid black;
        overflow:auto;
      }
    </style>
  </head>
 
  <body>
    <div><img src="tree.png"></div>
  </body>
</html>