Урок №8. Margin. Padding. Border.

В этом уроке мы рассмотрим:

Border (рамка(граница))
Margin (поля)
Padding (отступы)

 


 

Данный урок посвящается свойствам блокового моделирования. Что бы сделать свою страницу, Вам необходимы теги div и span, именно с ними мы будем работать. Конкретно тег div является основой (контейнером) для всех остальных элементов. Тег span создает строчный блок.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Блоковая модель</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <div id="number1">

       Текст заключен в тег div с идентификатором id="number1".

       </div>

       <div id="number2">

       <div id="number3"> Текст заключен в тег div с идентификатором id="number3".</div>

       <div id="number4"> Текст заключен в тег div с идентификатором id="number4".</div>

       </div>

     </body>

   </html>

 

Результат страницы в браузере:

Margin. Padding. Border.

 

Как видно, тег div на данном этапе ничем не отличается от тега p, все те же абзацные отступы.
Эта страничка и станет нашим орудием для эксперимента.

 


 

Border (рамка (граница))

Первое что нужно запомнить, границу содержимого можно задавать для каждой стороны отдельно, на это отведены и отдельные свойства:

          Border-top – задает верхнюю границу содержимого.

          Border-right – задает правую границу содержимого.

          Border-bottom – задает нижнюю границу содержимого.

          Border-left – задает левую границу содержимого.

Каждая из сторон может иметь свой стиль, цвет, толщину. Что бы задать одно из значений, необходимо через дефис дописать нужное свойство, в конечном результате это будет выглядеть как border-bottom-color или border-right-style, а сейчас немного о свойствах:

          Border-color – цвет. Задается с помощью слов, шестнадцатеричных кодов, десятичных кодов RGB.

          Border-width – толщина. Задается с помощью любой единицы измерения.

          Border-style — стиль.

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

          None – граница отсутствует. Используется по умолчанию.

          Dotted – граница состоит из точек.

          Dashed – пунктирная линия.

          Solid – сплошная линия.

          Double – двойная сплошная.

          Groove – вдавленная объёмная линия.

          Ridge – выпуклая объёмная линия.

          Inset – граница отображается таким образом, что весь блок выглядит вдавленным.

          Outset – граница отображается таким образом, что весь блок выглядит выпуклым.

Пример каждой из границ:

Пример возможных Border (рамка (граница))

 

Вернемся к нашей тестовой страничке, в таблице стилей зададим тегу div с идентификатором number1 следующих свойств:

#number1{

  border-bottom-style:dashed;

  border-bottom-color:blue;

  border-left-style:solid;

  border-left-width:3px;

  border-left-color:red;

  border-right-style:dotted;

  border-right-width:3px;

  border-right-color:yellow;

  border-top-style:groove;

  border-top-color:pink;

}

 

Результат в браузере:

Пример свойства border

 

Разные рамки выглядят как то безумно да? Но иногда и это пригодится. Для глаза приятней, когда все границы выглядят по классике, одинаковыми.

При одинаковых границах возможна сокращенная запись:

#number1, #number2, #number3, #number4{

  border: 3px solid gold;

}

 

Результат в браузере:

Пример свойства Border (рамка (граница))

 

Как видно, границы сливаются, противно, правда? Для этого и существуют поля элемента.

 


 

Margin (поля)

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

          Margin-top – ширина верхнего поля.

          Margin-right – ширина правого поля.

          Margin-bottom – ширина нижнего поля.

          Margin-left – ширина левого поля.

Существует сокращённая запись для полей разных размеров:

p{

  margin:5px 10px 15px 10px;

}

 

Соответственно первый размер это верхнее поле, второй – правое поле, третий – нижнее, четвертый – левое поле.

Если размеры полей, размещенных друг напротив друга ( левое-правое, верхнее-нижнее ) одинаковы, тогда существует еще более сокращенная версия записи:

p{

  margin:5px 10px;

}

 

Ну а если уж все поля одинакового размера, тогда запись вообще непристойно коротка:

p{

  margin: 10px;

}

 

В качестве значения можно задавать и проценты, и минусовые значения.

Зададим для всех элементов поле в размере 15 пикселей:

#number1, #number2, #number3, #number4{

  border: 3px solid gold;

  margin:15px;

}

 

Результат:

Пример свойства margin

 

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

Исправим!

 


 

Padding (отступы)

С помощью свойства padding мы исправим проблемку, которая выскочила у нас ранее. А именно сделаем некий промежуток (отступ) между содержимым и границей блока.

Допустимые свойства:

          Padding-top – верхний отступ.

          Padding-right – отступ справа.

          Padding-bottom – нижний отступ.

          Padding-left – отступ слева.

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

Сокращенная запись аналогична ранее рассмотренной сокращенной записи полей (margin).

Зададим для нашей тестовой страницы следующие отступы: верх-низ – 7 пикселейправо-лево – 5 пикселей:

#number1, #number2, #number3, #number4{

  border: 3px solid gold;

  margin:15px;

  padding:7px 5px;

}

 

Результат в браузере:

Пример свойства padding

 

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

#number1, #number2, #number3, #number4{

  border: 3px solid gold;

  margin:15px;

  padding:7px 5px;

}

#number1, #number2{

  background:red;

}

#number3, #number4{

  background:green;

}

 

Результат в браузере:

Пример свойства padding

 

Зададим высоту и ширину блоков:

#number1, #number2, #number3, #number4{

  border: 3px solid gold;

  margin:15px;

  padding:7px 5px;

}

#number1{

  background:red;

  width:300px;

  height:100px;

}

#number2{

  Background:red;

  Width:300px;

}

#number3, #number4{

  background:green;

  width:300px;

  height:100px;

}

 

Результат:

Пример свойств height и width

 

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

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

Повторите все 8 уроков CSS, которые Вы уже прошли, и создайте страничку со всем содержимым, что то примерно такое:

#number1, #number2, #number3, #number4{

  border: 3px solid gold;

  margin:15px;

  padding:7px 5px;

  font-size:16px;

}

#number1{

  background:red;

  width:300px;

  height:100px;

  text-align:center;

  color:silver;

}

#number2{

  Background:red;

  Width:300px;

  Text-align:right;

  Color:silver;

}

#number3, #number4{

  background:green;

  width:300px;

  height:100px;

  text-align:left;

  text-transform:none;

  word-spacing:10px;

  color:red;

}

#number1:first-letter{

  color:black;

  font-size:40px;

}

#number3:first-letter, #number4:first-letter{

  color:black;

  font-size:40px;

}

 

Результат:

Пример тега div + css

 

До встречи на следующем уроке!

 


 

Закрыть меню