Свойства полей

Свойства полей

Как отмечалось выше, отображая каждый элемент, браузер как бы создает прямоугольный блок, внутри которого и размещается содержимое элемента. Свойства полей определяют ширину области поля блока. Свойство margin позволяет управлять шириной всех четырех полей. Вы также можете указывать одно из следующих свойств: margin-top, margin-right, margin-bottom, margin-left либо некоторые из них в любой комбинации, чтобы задать значения полей только для отдельных сегментов.

Все свойства margin могут принимать следующие значения.

• «длина» – вы указываете фиксированную ширину поля.

• «проценты» – вы указываете значения поля в процентах. Процентное соотношение вычисляется относительно ширины сгенерированного блока.

• auto – браузер задает значение поля автоматически. Соответственно, разные браузеры будут использовать разные значения.

Рассмотрим пример – небольшое правило CSS, которое устанавливает значение ширины верхнего поля, равное 2 em.

H1 { margin-top: 2em }

Подробнее разберем сокращенную запись этих свойств – margin. Согласитесь, не очень-то удобно каждый раз набирать следующий код:

body {

margin-top: 2em;

margin-right: 2em;

margin-bottom: 2em;

margin-left: 2em;

}

Если свойство margin принимает только одно значение, то оно применяется ко всем полям. Если свойство принимает два значения, то первое применяется к верхнему и нижнему полям, а второе – к правому и левому. Если же оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему полю. И, наконец, если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам соответственно.

Если вы зададите для свойства margin только одно значение, то оно будет применяться ко всем полям. Если вы зададите два значения, то первое будет применяться к верхнему и нижнему, а второе – к правому и левому полям. Если же вы зададите три значения, то первое будет применяться к верхнему, второе – к левому и правому, а третье – к нижнему полю. И, наконец, если зададите четыре значения, то они будут применяться к верхнему, правому, нижнему и левому полям соответственно.

Напоследок рассмотрим такой пример:

body { margin: 1em 2em 3em }

Применив эту таблицу стилей к HTML-документу, вы установите ширину верхнего, правого, нижнего и левого полей страницы равной 1 em, 2 em, 3 em и 2 em соответственно.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

8.2.3.1.6. Ширина внешних полей

Из книги Информационная технология ПРОЦЕСС СОЗДАНИЯ ДОКУМЕНТАЦИИ ПОЛЬЗОВАТЕЛЯ ПРОГРАММНОГО СРЕДСТВА автора Автор неизвестен


Свойства, доступные только для чтения, и свойства, доступные только для записи

Из книги Язык программирования С# 2005 и платформа .NET 2.0. [3-е издание] автора Троелсен Эндрю

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


Отображение полей и свойств

Из книги Эффективное делопроизводство автора Пташинский Владимир Сергеевич

Отображение полей и свойств Реализация ListFields() будет аналогичной. Единственным отличием будет вызов Type.GetFields(), а результирующим массивом будет FieldInfo. Для простоты мы печатаем только имена полей.// Отображение имен полей типа.public static void ListFields(Type t) { Console.WriteLine("***** Поля


Определение полей данных

Из книги Интернет решения от доктора Боба автора Сворт Боб

Определение полей данных Перечни, структуры и классы могут поддерживать поля данных. Во всех случаях для указания таких полей используется директива. field. Например, чтобы добавить немного сути в каркас MyEnum, давайте определим для него три пары имен и значений (заметьте, что


Разрешение автоприращения для полей

Из книги TCP/IP Архитектура, протоколы, реализация (включая IP версии 6 и IP Security) автора Фейт Сидни М

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


Использование полей

Из книги VBA для чайников автора Каммингс Стив

Использование полей Поля в Word – это не только пустое пространство, отделяющее текст от края страницы. Существуют так называемые активные поля – особые участки, содержащие изменяемую информацию. Поля существенно упрощают работу, а иногда и выполняют операции, без них


10.8.5 Общепринятое использование полей

Из книги CSS3 для веб-дизайнеров автора Сидерхолм Дэн

10.8.5 Общепринятое использование полей При подготовке заголовка TCP к пересылке порядковый номер первого октета передаваемых данных указывается в поле последовательного номера (Sequence Number).Номер следующего октета, ожидаемого от партнера по соединению, заносится в поле


Выбор полей

Из книги HTML5 для веб-дизайнеров автора Джереми Кит


Расчет полей

Из книги Linux и UNIX: программирование в shell. Руководство разработчика. автора Тейнсли Дэвид

Расчет полей Базовая сетка важна для расчета полей – точно рассчитанных горизонтальных областей страницы, помогающих в размещении сгруппированных элементов вдоль вертикальной оси. Поля могут быть полезны для расчета места, которое понадобится для размещения знака


Стили для полей и подписей

Из книги Описание языка PascalABC.NET автора Коллектив РуБоард

Стили для полей и подписей Первые фрагменты CSS, которые мы добавим, чтобы начать построение этой формы, будут обрабатывать элементы fieldset и label – лишь немного пространства между строками.#thing-alerts fieldset { margin: 0 0 10px 0; }#thing-alerts label {  display: block; font-weight: bold; line-height: 1.4; color: #666; color: rgba(0, 0, 0,


Типы полей ввода

Из книги автора

Типы полей ввода В HTML5 стало намного больше вариантов атрибута type элемента input. Здесь нужно заасфальтировать столько тропок, что это похоже на строительные работы после того, как по лесу в панике пробежала толпа


11.1.4. Индексация полей

Из книги автора

11.1.4. Индексация полей При работе с командой sort не следует забывать, что команда обращается к первому полю как к полю 0, следующее поле имеет номер 1 и т. д. Если номера полей не указаны, вся строка считается единым полем. Обратимся к тестовому файлу и уточним, каким образом


11.4.1. Задание разделителя полей

Из книги автора

11.4.1. Задание разделителя полей В качестве входного файла мы возьмем файл pers из предыдущего примера, только на этот раз поля в нем будут разделены двоеточием.$ cat persP. Jones:Office Runner:ID897 S. Round:UNIX admin:ID667 L. Clip:Personl Chief:ID982Предположим, необходимо извлечь из файла список


11.5.2. Выбор разделителя полей

Из книги автора

11.5.2. Выбор разделителя полей Если требуется создать выходной файл, в котором разделителем полей будет какой?то другой символ вместо табуляции, воспользуйтесь опцией -d. В приведенном ниже примере строки объединяемых файлов разделяются двоеточием:$ paste -d: pas2 pas1P. Jones:ID897 S.


Инициализаторы полей

Из книги автора

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