На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

Поля у блочных элементов

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

В CSS существует параметр padding, который задает отступы для всех сторон блока. Однако браузеры по-разному понимают этот атрибут и показывают результат на веб-странице неодинаково.

Чтобы понять особенности и различия браузеров в использовании полей, создадим прямоугольник с помощью тега DIV и установим у него отступы параметром padding (пример 1).

Пример 1. Одинаковые поля у блока

<div style="padding: 10px; width: 300; background: #C0C0C0">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>

Обязательно указывайте, в каких единицах измеряются поля (в примере —px). Хотя по умолчанию, если стоит просто число, всегда подразумеваются пиксели, браузер Opera требует, чтобы единицы измерения были заданы. В противном случае никаких полей не будет.

Параметр padding, если он у него указано только одно значение, устанавливает величину полей со всех сторон блока равными. Однако, как показано на рис. 1, результат действия примера в основных браузерах будет различаться.

Рис. 1. Результат действия примера 1 в Internet Explorer
Internet Explorer

Рис. 2. Результат действия примера 1 в Netscape
Netscape Communicator

Рис. 3. Результат действия примера 1 в Opere
Opera

Рис. 1. Результат действия примера 1

Internet Explorer, сохраняя заданную ширину блока неизменной, управляет величиной полей от края до текста, как, собственно, и должно быть. Браузеры Opera и Netscape по какой-то странной прихоти увеличивают размер блока, добавляя к его ширине, заданной параметром width, еще и величину полей. Вертикальные отступы в разных браузерах тоже очень сильно разнятся, показывая совершенно противоречивый результат.

Чтобы добиться нужного результата, отступы следует устанавливать не у блочного элемента, а у дочернего, который размещен внутри него. Для примера 1 это будет тег параграфа P. Оставляя ширину и цвет фона для тега DIV неизменным, величину полей переносим в стиль параграфа (пример 2).

Пример 2. Поля, показываемые одинаково в разных браузерах

<div style="width: 300; background: #C0C0C0">
<p style="padding: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>

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

Влад Мержевич
Рецепты HTML

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100