Как сделать сайтУроки CSS → Урок 9. Свойства - margin, padding, border

CSS - Урок 9. Свойства - 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 - граница отображается так, что весь блок выглядит выпуклым.

В браузере разные стили границ выглядят так:
css border


Давайте зададим нашему первому 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; }


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


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

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; }


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


Давайте зададим фон нашим элементам, чтобы убедиться, что фон отступов совпадает с фоном элемента, а фон полей - прозрачный.
#first, #second, #third, #fourth{ border: 1px solid red; margin:10px; padding:10px 5px; } #first, #second{ background:yellow; } #third, #fourth{ background:pink; }


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


Теперь давайте зададим ширину и высоту наших блоков, например, так:
#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:300px; height:100px; }


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


А в IE вот так:
css


Но мы задали ширину у всех блоков одинаковую, почему же тогда в IE блок с id="second" шире первого блока? Да потому, что IE не включает в размер блока поля и отступы. Браузер отобразил 3 и 4 блоки шириной в 300 пикселов, а потом задал им поля и отступы, именно на это количество пикселов наш второй блок и шире первого. А остальные браузеры делают наоборот. Исправим это так, чтобы во всех браузерах было одинаково:
#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 в разных браузерах держите в голове, так как при верстке сайта оно используется обязательно, а вот отображаться может по-разному.

Собственно мы рассмотрели все способы задания полей, отступов и границ. Как всегда в конце урока добавим то, что уже изучили, например, так:
#first, #second, #third, #fourth{ border: 1px solid red; margin:10px; padding:10px 5px; font-size:14px; } #first{ background:yellow; width:300px; height:100px; text-align:center; color:blue; } #second{ background:yellow; width:300px; text-align:center; color:blue; } #third, #fourth{ background:pink; width:270px; height:100px; text-align:left; text-transform:capitalize; word-spacing:8px; color:red; } #first:first-letter{ color:red; font-size:26px; } #third:first-letter, #fourth:first-letter{ color:blue; font-size:26px; }


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


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



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.