Полями називають відступи від краю блоку до уявного прямокутника, що обмежує його вміст. Використання полів підвищує читабельність тексту і покращує сторінки.
У 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, результат дії прикладу в основних браузерах буде різним.
Internet Explorer
Netscape Communicator
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