... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Форматирование блоков. Поля (стр. 1).

 

 

Блоки в HTML и CSS ||  Поля ||  Границы ||  Отступы ||  Отступы или поля?


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

Свойство margin-top, margin-right, margin-bottom, margin-left

Эти свойства определяют величину полей вокруг блока:
  • margin-top - задает ширину верхнего поля;
  • margin-right - задает ширину правого поля;
  • margin-bottom - задает ширину нижнего поля;
  • margin-left - задает ширину левого поля.

Значения могут задаваться в любых единицах длины, а также в процентах. Процентное соотношение в этом случае вычисляется относительно контейнера, породившего этот блок. Контейнером для любого блока служит родительский элемент. Давайте разберем способы задания полей на примере всей Web-страницы. По умолчанию в любом браузере они имеют определенное ненулевое значение. Помните, когда мы верстали страницы при помощи таблиц, вокруг таблицы присутствовали белые поля.

Чтобы их устранить при помощи CSS, следует записать такое правило:

BODY { margin-top: 0рх; margin-right: 0px; margin-bottom:0px; margin-left:0px; }


Если для страницы требуется установить поля по 10% от ширины страницы справа и слева, а поля сверху и снизу не нужны, то правило будет выглядеть так:

BODY { margin-top: 0px; margin-right: 10%; margin-bottom: 0px; margin-left: 10%; }


В качестве значения может быть также использовано ключевое слово auto, при этом величины полей вычисляются автоматически, и результат будет зависеть от множества факторов. Пока мы их подробно рассматривать не будем, поскольку еще не обладаем необходимым набором знаний, но позже обязательно вернемся к этому вопросу.

P { margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; }

Все поля для этого абзаца будут вычислены автоматически.

Допустимы также отрицательные значения, в этом случае поля соседних блоков могут перекрываться. О таких ситуациях поговорим после того, как более подробно изучим блоковую модель CSS.

 

Страница: - 1 - | - 2 -

 

Блоки в HTML и CSS ||  Поля ||  Границы ||  Отступы ||  Отступы или поля?

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены