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

Дата добавления: 2013-12-23; просмотров: 1149; Нарушение авторских прав

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

Боксовая модель в CSS

Урок 9: Боксовая модель

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

Эта иллюстрация может показаться слишком научной, поэтому попытаемся использовать эту модель на конкретном примере с заголовком и текстом. HTML нашего примера таков (из Всеобщей Декларации Прав Человека):

<h1>Article 1:</h1>

<p>All human beings are born free

и equal in dignity и rights.

They are endowed with reason и conscience

и should act towards one another in a

spirit of brotherhood</p>

Добавив цвет и информацию шрифта этот пример можно представить так:

В этом примере - два элемента : <h1> и <p>. Боксовая модель этих элементов выглядит так:

Хотя это может показаться немного сложным, тем не менее, видно, что каждый HTML-элемент окружён боксом. Боксом, который можно настроить с помощью CSS.

<% '

The properties which regulate the different boxes are: padding, margin and border. The next two lessons deal with exactly these three properties:

Lesson 10: The box model - margin & padding

Lesson 11: The box model - border

When you have finished these two lessons, you will master the box model and be able to layout your documents much finer and more precise than in the old fashion using tables in HTML.

В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним, как можно изменять представление элементов свойствами 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; }

· Показать пример

<== предыдущая лекция	\|	следующая лекция ==>
Идентификация элемента с помощью id	\|	Примеры определения рамок