Отступы на веб-странице - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Рецепты CSS » Отступы на веб-странице
Отступы на веб-странице
EvgenyДата: Вторник, 23.02.2010, 19:46 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
Горизонтальные и вертикальные отступы от края браузера до содержимого веб-страницы встроены в браузер по умолчанию. Тем не менее, можно изменить значение этих параметров, делая отступы по желанию больше или меньше. Так, например, можно установить отступ от верхнего края окна до заголовка страницы, или вообще убрать его.

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

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

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

Code
<!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, к которому применяется стиль, задает отступы на всей веб-странице целиком. То же можно сделать и применительно к отдельным элементам, например, заголовкам (пример 2).

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

Code
<!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. Три значения разделенных пробелом определяют отступ сверху, одновременно слева и справа, и снизу.

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

Code
<!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>

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

 
Форум » Статьи о CSS » Рецепты CSS » Отступы на веб-странице
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]