Воскресенье, 17.12.2017, 07:30
Приветствую Вас Гость | rss
Меню сайта
Форма входа

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Урок 10: Поля и заполнение



  В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним, как можно изменять представление элементов свойствами margin и padding.

  •        Установим поля элемента
  •        Установим заполнение элемента

Установим поля элемента

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны с до соседних элементов (или краёв документа). См. также диаграмму в Уроке 9.

В качестве первого примера мы разберёмся, как определить поля самого документа, т. е. элемента <body>. На иллюстрации показано, какие поля нам нужны.

 
поле элемента


CSS-код для этого примера выглядит так:

body{
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}




Или вы можете написать более элегантно:

body {
margin: 100px 40px 10px 70px;
}



установка поля документа


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

body {
margin: 100px 40px 10px 70px;
}


p{
margin: 5px 50px 5px 50px;
}



установка элемента

 



Установим заполнение элемента

Заполнение не влияет на расстояние элемента до других элементов, а лишь определяет внутреннее расстояние между рамкой и содержимым элемента.

Использование заполнения (padding) можно показать на простом примере, где все заголовки имеют цветной фон:

h1{
background: yellow;
}


h2 {
background: orange;
}



цвет заголовка

Определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left: 120px;
}


заголовки


Поиск
Календарь
«  Декабрь 2017  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей

rss
Яндекс.Метрика Каталог@Mail.ru - каталог ресурсов интернет