Отступы на веб-странице
Горизонтальные и вертикальные отступы от края браузера до содержимого веб-страницы встроены в браузер по умолчанию. Тем не менее, можно изменить значение этих параметров, делая отступы по желанию больше или меньше. Так, например, можно установить отступ от верхнего края окна до заголовка страницы, или вообще убрать его.
Отступы задаются параметрами margin и padding. Наличия двух атрибутов вместо одного требуют интересы разных браузеров, margin — Internet Explorer, а padding — Opera и Firefox. Совмещение разных параметров гарантирует, что показываться веб-страница в разных браузерах будет одинаково.
Управлять отдельными отступами от разных краев экрана можно с помощью параметров margin-top, margin-bottom, margin-right и margin-left, которые соответственно изменяют расстояние от верхнего, нижнего, правого и левого края окна браузера. Прежде чем их использовать, следует задать нулевое значение параметрам margin и padding (пример 1).
Пример 1. Изменение верхнего отступа от края браузера
<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, к которому применяется стиль, задает отступы на всей веб-странице целиком. То же можно сделать и применительно к отдельным элементам, например, заголовкам (пример 2).
Пример 2. Изменение отступов у заголовка
<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>
<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.2005 | Последнее обновление: 16.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Роман
21.05.2007
Дмитрий
30.06.2007
возникла проблемка,которую не получается решить.
задал стиль во внешнем файле для тега <body>, в "opera" вс? работает без проблем.в IE и Mozilla/5.0 упорно не хочет работать.хотя вс? было нормально,пока стиль был прописан в самом коде страницы.
BODY{
background:white;
margin-left:0;
margin-top:0;
margin-right:0;
margin-bottom:0;
}
вот кат задан стиль.пробовал как указано в первом примере,ни чего не получилось.подскажите,пожалуйста,в ч?м проблема?
p.s.остальные стили работают без проблем.
Дмитрий
01.07.2007
FeNUMe
10.10.2007
потому стоит использовать сокращенные формы...BODY{
background:white;
margin:0;
}
ЛОЛКА
17.01.2008
Мне нужно чтоб лого было без отступов а дальше с ними.
ВОт так выгляддит лого
===========================================================================
<td align="right" background="http://fanwow.narod.ru/fanwow_left_background.jpg">
<img src="http://fanwow.narod.ru/fanwow_logo_1.jpg" width="93" height="126">
</td>
<td width="167" height="126">
<img src="http://fanwow.narod.ru/fanwow_logo_2.jpg" width="167" height="126">
</td>
<td width="468" height="126" >
<img src="http://fanwow.narod.ru/fanwow_logo_center.jpg" width="468 height="126">
</td>
<td width="167" height="126">
<img src="http://fanwow.narod.ru/fanwow_logo_3.jpg" width="167" height="126">
</td>
<td align="left" background="http://fanwow.narod.ru/fanwow_right_background.jpg">
<img src="http://fanwow.narod.ru/fanwow_logo_4.jpg" width="93" height="126">
============================================================================
Анатолий
02.02.2008
<td align='left' background='...' cellpading='0' cellspacing='0'>
Можно и через таблицу стилей:
td.pic{
margin:0px;
padding:0px;
}
и в теге:
<td class='pic' ...>
Сергей
17.02.2008
В файле css в селекторе BODY прописан фоновый рисунок и все работает)) КАК изменить файл так чтобы в разные фреймы я мог вставить разные фоновые рисунки
Сергей
17.02.2008
Дмитрий
22.04.2008
Опа!
02.06.2008
ф
12.06.2008