Набивання (padding)
Текст всередині блоку починається не від самої його межі. Між кордоном і змістом блоку є вільний простір. Воно називається внутрішній відступ текстового блоку або padding. Спільно із зовнішнім відступом (margin) текстового блоку padding утворює спільне поле відступу від кордону охоплює блок елемента розмітки.
Padding можна проілюструвати на прикладі лівого внутрішнього відступу тексту в параграфі:
Рис. 9.7.
Для цього прикладу при описі параграфа використовувався стиль:
P {padding-left: 100px; text-align: left;
border-width: 1px;}
Щоб браузер правильно відображав стилі, не слід розміщувати опис стилю на декількох рядках, як це зроблено в прикладі.
У блоку тексту існує чотири сторони. Відповідно, padding може бути:
padding-left - лівий внутрішній відступ, який визначає відстань від лівого краю блоку до його змісту;
padding-right - правий внутрішній відступ, який визначає відстань від правого краю блоку до його змісту;
padding-top - верхній внутрішній відступ, який визначає відстань від верхнього краю блоку до його змісту;
padding-bottom - нижній внутрішній відступ, який визначає відстань від нижнього краю блоку до його змісту;
padding - визначає єдиний розмір внутрішнього відступу блоку. Цей параметр задається в разі однакового розміру відступу від усіх сторін блоку.
Проілюструємо застосування padding на прикладі:
Рис. 9.8.
P {padding-left: 100px; padding-right: 50px;
padding-top: 20px; padding-bottom: 10px;
text-align: left; border-width: 1px;}
При установці padding слід пам'ятати, що цей параметр задає розмір відступу від кордону блоку до кордону зовнішнього відступу (margin) змісту блоку. З цієї причини загальний розмір поля може виявитися більше, ніж задано в параметрі padding.
- Конспект лекцій з дисципліни
- Лекція 1. Принципи організації глобальної мережі Інтернет. Введення в Веб-технології: структура та принципи Веб.
- Предмет курсу
- Характеристика Інтернет
- Стек протоколів tcp / ip
- Система доменних імен dns
- Структура і принципи www
- Проксі-сервери
- Протоколи Інтернет прикладного рівня
- Лекція 2. Принципи побудови Веб-сайтів. Структура Веб застосуваннь. Характеристика мови html.
- Історія розвитку html
- Принципи гіпертекстової розмітки
- Групи тегів нтмl
- Лекція 3. Структура html-документа і елементи розмітки заголовка документа.
- Призначення заголовка
- Відображення змісту елемента title
- Основні контейнери заголовка
- Елемент розмітки head
- Елемент розмітки title
- Елемент розмітки base
- Елемент розмітки meta
- Елемент розмітки link
- Елемент розмітки style
- Елемент розмітки script
- Лекція 4. Контейнери тіла документа.
- Теги тіла документа
- Тіло документа - контейнер body
- Теги управління розміткою Заголовки
- Атрибут аlign
- Теги управління відображенням символів
- Теги, що управляють формою відображення
- Верхні і нижні індекси
- Атрибут sizе
- Атрибут соlоr
- Створення списків в html
- Атрибути маркерів у ненумерований списку
- Коментарі в мові html
- Гіпертекстові посилання
- Лекція 5. Графіка.
- Використання графіки в html.
- Атрибут src
- Атрибут alt
- Атрибут аlign
- Формати графічних файлів
- Активні зображення
- Зображення в мініатюрі
- Лекція 6. Таблиці html.
- Засоби опису таблиць в html
- Створення таблиць в html
- Атрибут nowrap
- Атрибут соlspan
- Атрибут rowspan
- Атрибут widтн
- Застосування порожніх клітинок
- Атрибут сеllраdding
- Атрибути аlign і valign
- Атрибут border
- Атрибут cellspacing
- Атрибут bgcolor
- Атрибут background
- Використання таблиць в дизайні сторінки
- Лекція 7. Використання html-форм
- Html-Форми
- Завдання форми - елемент form
- Атрибут cols
- Атрибут name
- Атрибут rows
- Алгоритм роботи фреймів
- Створення простої сторінки з фреймами
- Завдання фреймової структури
- Підготовка вмісту фрейма
- Підготовка фрейму main
- Атрибути rows і соls
- Атрибут rows
- Атрибут сols
- Атрибут nаме
- Атрибут маrginwidth
- Атрибут маrginheight
- Атрибут scrolling
- Атрибут noresize
- Атрибут srс
- Атрибут таrgет
- Вкладені і множинні кадрові структури
- Лекція 9. Призначення і застосування каскадних таблиць стилів css
- Призначення css
- Способи застосування css
- Перевизначення стилю
- Елемент style
- Посилання на зовнішній опис
- Імпорт опису стилів
- Селектор - ім'я елемента розмітки
- Селектор - ім'я класу
- Селектор - ідентифікатор об'єкта
- Спадкування й перевизначення
- Лекція 10. Блокові і стрічкові елементи css
- Блокові і стрічкові елементи
- Елемент div
- Елемент span
- Властивості блоків
- Відступи (margin)
- Набивання (padding)
- Рамка (border)
- Обтікання блоку тексту
- Лекція 11.Позиціонування у css
- Координати і розміри
- Абсолютні координати
- Відносні координати
- Лінійні розміри блоку
- Управління видимістю
- Порядок накладення і область видимості
- Порядок накладення блоків. Z-index
- Область видимості блоку. Clip
- Лекція 12. Призначення та застосування JavaScript.
- Метод join ()
- Метод reverse ()
- Метод sort ()
- Оператори мови
- Лекція 14. Об'єктна модель броузера.