Page 53 - 6108

таблиць стилів. Очистити стилі браузерів для всіх елементів можна за
допомогою універсального селектора:
* {
margin: 0;
padding: 0;
}

Блочний елемент за замовченням має властивість {display: block;}
створює розрив рядка перед тегом і після нього. Він утворює прямокутну
область, за шириною займає всю ширину веб-сторінки або блоку-батька, якщо
для нього не задано значення width.
Блокові елементи можуть містити всередині себе елементи будь-якого
типу. Не можна розміщувати блокові елементи всередині рядкових, за винятком
елемента <img>. Для блокових елементів можна задавати margin і padding.
Властивості width і height встановлюють ширину і висоту області
вмісту елемента. Фактична ширина елемента складається з ширини полів
(внутрішніх відступів), меж і зовнішніх відступів.
Вбудовані (рядкові) елементи мають за замовченням властивість
{display: inline;} не створюють блоки, вони відображаються на одному
рядку з вмістом тегів, що знаходяться поруч. Рядкові елементи є нащадками
блокових елементів. Вони ігнорують верхні і нижні margin і padding, але
якщо для елемента задано фон, він буде поширюватися на верхній і нижній

padding, заходячи на сусідні рядки тексту.
Ширина і висота рядкового елемента залежить тільки від його змісту,
задавати розміри за допомогою CSS не можна. Збільшити відстань між
сусідніми елементами по горизонталі можна за допомогою горизонтальних
полів і відступів.
Для того, щоб верхні і нижні поля і відступи працювали для вбудованого
елемента, потрібно використовувати конструкцію {display: inline-
block}, елемент залишиться вбудованим, але до нього можна буде повноцінно
застосувати поля, відступи, задати ширину і висоту.
В деяких випадках буває необхідно, щоб блоковий елемент поводився як
рядковий і навпаки. Для цього необхідно поміняти значення властивості
display, наприклад:

div {
display: inline;
} / * Перетворюємо блоковий елемент у рядковий * /
a {
display: block;
} / * перетворюємо рядковий елемент у блоковий, завдяки
чому весь блок, а не тільки текст посилання, стає посиланням
* /
На практиці частіше використовується перетворення {display:
block;} в {display: inline-block;}. Цей прийом дозволяє створювати
горизонтальні панелі навігації, горизонтальні списки чи галереї зображень.