www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > FAQ CSS (ЦСС) > Отступы на web-странице

Отступы на web-странице

контентовая версия  

Горизонтальные и вертикальные отступы от края браузера до содержимого web-страницы встроены в браузер по умолчанию. Тем не менее, можно изменить значение этих параметров, делая отступы по желанию больше или меньше. Так, например, можно установить отступ от верхнего края окна до заголовка страницы, или вообще убрать его.

Отступы задаются параметрами margin и padding. Наличия двух атрибутов вместо одного требуют интересы разных браузеров, margin — Internet Эксплорер, а padding — Опера и Файер фох. Совмещение разных параметров гарантирует, что показываться web-страница в разных браузерах будет одинаково.

Управлять отдельными отступами от разных краев экрана можно с помощью параметров margin-top, margin-bottom, margin-right и margin-left, которые соответственно изменяют расстояние от верхнего, нижнего, правого и левого края окна браузера. Прежде чем их использовать, следует задать нулевое значение параметрам margin и padding (пример 1).

Пример 1. Изменение верхнего отступа от края браузера

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Отступы на странице</title>
<style type="text/CSS (ЦСС)">
BODY {
  margin: 0; /* Убираем отступы */
  padding: 0; /* Убираем поля */
  margin-top: 10px; /* Добавляем отступ сверху */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

Селектор BODY, к которому применяется стиль, задает отступы на всей web-странице целиком. То же можно сделать и применительно к отдельным элементам, например, заголовкам (пример 2).

Пример 2. Изменение отступов у заголовка

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Отступы на странице</title>
<style type="text/CSS (ЦСС)">
H1 {
  margin-top: 0; /* Отступ сверху */
  margin-bottom: 1em; /* Отступ снизу */
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>...</p>
</body>
</html>

Одновременно использовать параметры margin и padding в данном случае уже необязательно.

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

Пример 3. Использование атрибута margin

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Отступы у параграфа</title>
<style type="text/CSS (ЦСС)">
P {
 margin: 0.5em 0 1em; /* Отступ сверху, справа-слева и снизу */
}
</style>
</head>
<body>

<h1>Заголовок</h1>
<p>Основной контент</p>

</body>
</html>

В данном примере изменяются отступы у параграфа, поскольку использование встроенных значений не всегда подходит.

Статья опубликована: 03.10.2009 Последнее обновление: 16.04.2009
Поиск по сайту
FAQ CSS (ЦСС)
Разделы
Теги по теме

BODY
Элемент BODY предназначен для хранения содержания web-страницы (контента), отображаемого в окне браузера.

H1...H6
ШТМЛ предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.

CSS (ЦСС) по теме

margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

margin-bottom
Устанавливает величину отступа от нижнего края элемента.

margin-top
Устанавливает величину отступа от верхнего края элемента.

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект