Відступи на web-сторінці

Горизонтальні і вертикальні відступи від краю браузера до вмісту web-сторінки вбудовані в браузер за замовчуванням. Проте, можна змінити значення цих параметрів, роблячи відступи за бажанням більше або менше. Так, наприклад, можна встановити відступ від верхнього краю вікна до заголовка сторінки, або взагалі прибрати його.

Відступи задаються параметрами margin і padding. Наявності двох атрибутів замість одного вимагають інтереси різних браузерів, margin - Internet Експлорер, а padding - Опера і Фаєр Фох. Поєднання різних параметрів гарантує, що показуватися web-сторінка в різних браузерах буде однаково.

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

Приклад 1. Зміна верхнього відступу від краю браузера

Селектор BODY. про якого йдеться стиль, задає відступи на всій web-сторінці цілком. Те ж можна зробити і стосовно до окремих елементів, наприклад, заголовкам (приклад 2).

Приклад 2. Зміна відступів у заголовка

Одночасно використовувати параметри margin і padding в даному випадку вже необов'язково.

Для скорочення тегів можна використовувати універсальний параметр margin. як показано в прикладі 3. Три значення розділені пропуском визначають відступ зверху, одночасно зліва і справа, і знизу.

Приклад 3. Використання атрибута margin

основний контент

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

Notice. Undefined variable: o in /home/www-html/data/www/www-html.ru/-id=64.htm on line 205

BODY
Елемент BODY призначений для зберігання змісту web-сторінки (контенту), що відображається у вікні браузера.

H1. H6
ШТМЛ пропонує шість заголовків різного рівня, які показують відносну важливість секції, розташованої після заголовка. Так, тег H1 являє собою найбільш важливий заголовок першого рівня, а тег H6 служить для позначення заголовка шостого рівня і є найменш значним.

CSS (ЦСС) по темі

margin
Встановлює величину відступу від кожного краю елемента. Відступом є простір від кордону поточного елемента до внутрішньої межі його батьківського елементу.

margin-bottom
Встановлює величину відступу від нижнього краю елемента.

margin-top
Встановлює величину відступу від верхнього краю елемента.

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