Горизонтальные и вертикальные отступы от края браузера до содержимого веб-страницы встроены в браузер по умолчанию. Тем не менее, можно изменить значение этих параметров, делая отступы по желанию больше или меньше. Так, например, можно установить отступ от верхнего края окна до заголовка страницы, или вообще убрать его.
Отступы задаются параметрами margin и padding. Наличия двух атрибутов вместо одного требуют интересы разных браузеров, margin — Internet Explorer, а padding — Opera и Firefox. Совмещение разных параметров гарантирует, что показываться веб-страница в разных браузерах будет одинаково.
Управлять отдельными отступами от разных краев экрана можно с помощью параметров margin-top, margin-bottom, margin-right и margin-left, которые соответственно изменяют расстояние от верхнего, нижнего, правого и левого края окна браузера. Прежде чем их использовать, следует задать нулевое значение параметрам margin и padding (пример 1).
Пример 1. Изменение верхнего отступа от края браузера
<!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">
<span class="select">BODY</span> {
margin: 0; <span class="comment">/* Убираем отступы */</span>
padding: 0; <span class="comment">/* Убираем поля */</span>
<span class="select">margin-top: 10px;</span> <span class="comment">/* Добавляем отступ сверху */</span>
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
Селектор BODY, к которому применяется стиль, задает отступы на всей веб-странице целиком. То же можно сделать и применительно к отдельным элементам, например, заголовкам (пример 2).
Пример 2. Изменение отступов у заголовка
<!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">
<span class="select">H1</span> {
<span class="select">margin-top: 0;</span> <span class="comment">/* Отступ сверху */</span>
<span class="select">margin-bottom: 1em</span><span class="comment">; /* Отступ снизу */</span>
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>...</p>
</body>
</html>
Одновременно использовать параметры margin и padding в данном случае уже необязательно.
Для сокращения кода можно использовать универсальный параметр margin, как показано в примере 3. Три значения разделенных пробелом определяют отступ сверху, одновременно слева и справа, и снизу.
Пример 3. Использование атрибута margin
<!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; <span class="comment">/* Отступ сверху, справа-слева и снизу */</span>
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Основной текст</p>
</body>
</html>
В данном примере изменяются отступы у параграфа, поскольку использование встроенных значений не всегда подходит.
Рекомендуем почитать:
• Создание вкладок c помощью HTML
• Многоцветный полупрозрачный эффект хамелеона
• Эффект мраморного текста
Оставить комментарий: