Блоки в CSS. Свойства CSS- margin, padding, border.

29.10.2022 13:52

Блоки в CSS.

    В HTML все элементы можно разделить на два типа: блочные и строчные.

    Блочные элементы визуально создают самостоятельную структурную единицу - блок. К ним можно отнести, например, элементы H1-H6, P, DIV. Такие элементы отделяются от других абзацными отступами.

    Строчные элементы выводятся линейной строкой. К ним можно отнести, например, элементы I, B, U, S и другие.

    В CSS модель документа представляется блоком. Каждый элемент в дереве элементов документа представляет собой самостоятельный блок. Причем, есть блоки, структурно отделенные от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.

    Блок имеет прямоугольную форму:

    Итак, у блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого.

    Затем идет граница блока (border), которая может быть как видимой, так и невидимой.

    Также блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента.

    Размер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.

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

 
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>Текст в параграфе.</p>
    <p>Текст в параграфе.</p>
  </body>
</html>
    

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

 
p{
  border:1px solid red;
}
    

Как мы уже знаем, отступы от границы задаются свойством padding, зададим его для параграфов:

 
p{
  border:1px solid red;
  padding:10px;
}
    

 

    Посмотрим на результат в браузере:

    Теперь у нас есть отступы внутри блока. Задание полей отделит блоки друг от друга:

 
p{
  border:1px solid red;
  padding:10px;
  margin:50px;
}
    
 

    Наконец, зададим размеры блоков параграфов:

 
p{
  border:1px solid red;
  padding:10px;
  margin:50px;
  width:100px;
  height:50px;
}
    
 

    Посмотрим на результат в браузере:

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

 

Свойства CSS- margin, padding, border.

    Сегодня мы будем учиться задавать свойства блоков. И делать это мы будем на примерах элементов div и span. div - этот элемент является контейнером для остальных. Элемент div отделяется от остальных элементов абзацными отступами. Элемент span, в отличии от div, создает строчный блок.

    Посмотрим на примере, создайте html-страницу со следующим кодом:

 
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
 
    <div id="first">Это текст в тегах div с id="first".
    </div>
 
    <div id="second">
   <div id="third">Это текст в тегах div с id="third".</div>
   <div id="fourth">Это текст в тегах div с id="fourth".</div>
    </div>
 
  </body>
</html>
    

Посмотрите на нашу страницу в браузере:

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

 

Border (граница)

    Границы в css можно задавать отдельно для каждой стороны:

  • border-top - верхняя граница.
  • border-right - правая граница.
  • border-bottom - нижняя граница.
  • border-left - левая граница.

Каждый сегмент границы может иметь свои характеристики: цвет, толщину и тип линии. Для этого к свойству границы через дефис необходимо дописать ключевые слова : color (для цвета), width (для толщины) и style (для типа линии). Например, border-top-color определяет цвет верхней границы, а border-left-style - тип линии для левой границы.

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

  • border-color - цвет всех границ.
  • border-width - толщина всех границ.
  • border-style - стиль всех границ.

    Значениями свойства color могут быть именные цвета (red, blue и т.д.), шестнадцатеричные коды цветов (типа #FFCCFF) и десятичные коды в модели RGB (типа rgb(255, 0, 0)).

    Значениями свойства width могут быть ключевые слова: thin (тонкая граница), medium (средняя граница) и thick (толстая граница). А также любая единица измерения.

    Значениями свойства style могут быть следующие ключевые слова:

  • none - граница отсутствует.
  • dotted - граница состоит из точек.
  • dashed - граница в виде пунктирной линии.
  • solid - граница отображается сплошной линией.
  • double - граница отображается двойной сплошной линией.
  • groove - граница отображается вдавленной объемной линией.
  • ridge - граница отображается выпуклой объемной линией.
  • inset - граница отображается так, что весь блок выглядит вдавленным.
  • outset - граница отображается так, что весь блок выглядит выпуклым.

Давайте зададим нашему первому div-у разные границы, чтобы посмотреть, как это работает:

 
#first{
  border-bottom-style:double;
  border-bottom-color:red;
  border-left-style:solid;
  border-left-width:2px;
  border-left-color:blue;
  border-right-style:solid;
  border-right-width:2px;
  border-right-color:yellow;
  border-top-style:dotted;
  border-top-color:green;
}
 

Посмотрим на результат в браузере:

 
 

    Иногда возможность задавать стили для разных секторов границы очень выручает, но чаще требуется задать единый стиль для всех границ и тогда удобнее пользоваться сокращенной записью border, в которой через пробел указываются: толщина, тип и цвет (именно в таком порядке).

    Давайте для всех элементов нашей страницы зададим один стиль границ, чтобы было удобнее разбираться с отступами и полями далее:

 
#first, #second, #third, #fourth{
  border: 1px solid red;
}
 

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

 

Margin (поля)

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

    Для этого используются свойства:

  • margin-top - ширина верхнего поля.
  • margin-right - ширина правого поля.
  • margin-bottom - ширина нижнего поля.
  • margin-left - ширина левого поля.

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

 
p{
  margin:5px 10px 15px 10px;
}
    
 

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

 
p{
  margin:5px 10px;
}
    
 

    В данном случае ширина верхнего и нижнего полей будет 5 пикселов, а правого и левого - по 10 пикселов.

    Если же у всех полей ширина одинакова, то сокращенная запись выглядит так:

 
p{
  margin:5px;
}
    
 

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

 
#first, #second, #third, #fourth{
  border: 1px solid red;
  margin:10px;
}
    

    Теперь наша страница в браузере выглядит так:

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

 

Padding (отступы)

    Как вы помните, отступы позволяют отделить содержимое блока от границы. Параметры отступов в css можно задать для каждой стороны отдельно, используя следующие свойства:

  • padding-top - ширина верхнего отступа.
  • padding-right - ширина правого отступа.
  • padding-bottom - ширина нижнего отступа.
  • padding-left - ширина левого отступа.

    Значения свойств могут задаваться в различных единицах длины или в процентах. Проценты вычисляются относительно ширины блока. В качестве значения может выступать только положительная величина.

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

    Давайте зададим для элементов нашей страницы отступы: сверху и снизу - по 10 пикселов, а справа и слева - по 5 пикселов.

 
#first, #second, #third, #fourth{
  border: 1px solid red;
  margin:10px;
  padding:10px 5px;
}
    
 

    Теперь наша страница в браузере выглядит так:

    Давайте зададим фон нашим элементам, чтобы убедиться, что фон отступов совпадает с фоном элемента, а фон полей - прозрачный.

 
#first, #second, #third, #fourth{
  border: 1px solid red;
  margin:10px;
  padding:10px 5px;
}
#first, #second{
  background:yellow;
}
#third, #fourth{
  background:pink;
}
 

    Теперь наша страница в браузере выглядит так:

    Следует помнить, что браузер IE не включает в размер блока поля и отступы. Он отображает 3 и 4 блоки заданной ширины, а потом задает им поля и отступы, и именно на это количество пикселов наш второй блок будет шире первого. А остальные браузеры делают наоборот. 

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

:

#first, #second, #third, #fourth{
  border: 1px solid red;
  margin:10px;
  padding:10px 5px;
}
#first{
  background:yellow;
  width:300px;
  height:100px;
}
#second{
  background:yellow;
  width:300px;  
}
#third, #fourth{
  background:pink;
  width:270px;
  height:100px;
}

    

    Теперь наша страница в браузерах выглядит так:

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

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

Назад