Головна Реєстрація Вхід
Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика
Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук
Вітаю Вас, Гість · RSS 26.04.2024, 01:31
На головну » Підручники » Підручник CSS » Урок 10: Боксова модель - поля & заповнення - Підручник CSS
Урок 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;
}

Показати приклад

Резюме

Вам залишився один крок до створення боксової моделі в CSS. У наступному уроці ми розглянемо, як встановлювати рамки різного кольору і як окреслювати елементи.
<< Урок 9: Боксова модель
Всього коментарів: 1
1 Влад  
0
У підрунику HTML на перших же уроках було сказано: <html>, <head>, </head>, <BODY style: (атрибут)> і так далі. Тоді чому підрунику CSS з"являється новий спосіб записувати атрибут тега <body> та інших? Я про запис: body {атрибут}?????

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]