Форматування HTML-абзацу. Короткі теоретичні відомості Інтервали між рядками

Подивимося як це виглядає у браузері:

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

Це невеликий та простий урок. Спробуйте самі змінювати розміри блоку і подивіться, що вийде. Практика - самий швидкий спосібнавчитися чогось!

У випадку HTML-документів теги працюють більше на розмітку контенту, ніж на вказівку того, як він має бути представлений. Більший контроль над поданням досягається за допомогою стилів. У цій статті я розгляну ті стилі, які пов'язані з форматуванням абзацу в HTML.

Тег

HTML дозволяє задати абзаци, а атрибут align вирівнює їх по лівому краю, по правому краю, по центру або по ширині. Крім них ми будемо використовувати глобальний атрибут style.

Вирівнювання абзацу

Можна вирівняти абзац, використовуючи атрибут align з такими значеннями:

text-align: left|right|center|justify|initial|inherit;

Скопіюйте наступний код у файл .html.

Цей абзац вирівняно по центру

Цей абзац вирівняно праворуч

Цей абзац виводиться у вікні браузера вирівняним по ширині. Розподілений по ширині абзац вирівнюється праворуч і лівим краєм за рахунок додавання додаткових пробілів. Ви можете бачити, що краї вирівняного по ширині абзацу відповідають краям абзаців, вирівняних по лівому та правому краю. У вирівняному з лівого краю абзаці лівий край є рівним, а в абзаці, вирівняному з правого краю - правий. Ви бачите, що цей абзац обидва краї є рівними? Це досягається завдяки стилю text-align: justify.

У вікні браузера HTML код абзацу виглядає так.

Інтервали між рядками

Ви можете керувати міжрядковим інтервалом абзацу за допомогою style=line-height. Використовуйте атрибут style з такими значеннями:

line-height: normal|number|length|initial|inherit;

Нижче наведено приклад HTML-коду , який виводить абзаци з різними міжрядковими інтервалами:

У цьому параграфі використовуються два значення атрибуту style. Перший line-height:1.5 визначає міжрядковий інтервал для абзацу, а друге значення text-align:justify визначає, що текст абзацу повинен розподілятися по ширині.

Цей абзац має подвійний міжрядковий інтервал та вирівняний по ширині. line-height:2 визначає подвійний інтервал. Атрибут style не обов'язково повинен мати два значення. Але якщо вам потрібно встановити два значення, ви можете зробити це, розділивши їх точкою з комою.

Нижче наведено кілька різних способів використання значення line-height для атрибуту style :

: Встановлює міжрядковий інтервал 13 пікселів;

: Встановлює HTML відстань між абзацами в 200% щодо поточного розміру шрифту;

: Встановлює висоту рядка 14 пікселів.

Відступи

Я використовував термін "відступи", щоб його було простіше зрозуміти. Але в HTML ми використовуємо проміжки, щоб створити навколо об'єкта порожній простір. Можна використовувати атрибут style зі значенням padding , щоб встановити абзац відступ ліворуч або праворуч.

Нижче наводиться приклад абзаців з відступом ліворуч і праворуч:

Цей абзац немає відступу, він просто вирівняний по ширині. Подивіться на елемент атрибуту P для цього абзацу.

Для цього абзацу я поставив відступ ліворуч у 30 пікселів за допомогою стилю padding-left:30px. Також цей абзац вирівняний за шириною за допомогою стилю text-align: justify. Як ви вже знаєте, ми можемо використовувати кілька значень для атрибуту Style, розділяючи їх крапкою з комою.

А цей абзац має відступ праворуч у 30 пікселів, але не має відступу зліва. Він також вирівняний по ширині. Значення padding-right атрибута style задає відступ праворуч. Якщо ви не бачите ефекту, зменшіть ширину вікна браузера, щоб абзац HTML, вирівняний по ширині, відображався належним чином.

Відступи між абзацами (відступ перед та відступ після абзацу)

У HTML чи CSS нам це не потрібно. Ми можемо просто вказати стиль padding для елемента

Padding-top та padding-bottom задають порожній простір до і після абзацу, який працює, як відступ зверху чи знизу. Подивіться на наведений нижче приклад тега

Я встановив для першого абзацу HTMLвідступ 10 пікселів перед другим та 50 пікселів після другого абзацу:

Для цього абзацу не встановлено відступів до або після. Це звичайний абзац вирівняний по ширині. Як ви знаєте, ми можемо вирівняти абзац по ширині за допомогою коду style=”text-align:justify” всередині тега.

Цей абзац випущено по ширині. Він також має відступ у 10 пікселів перед абзацом та 50 пікселів після. Усередині тега я поставив 3 стилі.

Це звичайний абзац без відступів та з вирівнюванням за замовчуванням.

Що слід пам'ятати

• Абзац HTML може бути вирівняний за допомогою атрибуту align або стилю text-align;
• HTML відображатиметься по-різному залежно від розмірів екрану, розмірів вікна браузера;
• Додавання додаткових пробілів або порожніх рядків HTML-код не впливає на висновок. Браузер видаляє всі зайві прогалини;
• Теги задають, що має відображатись, а стилі визначають, як це має виводитися;
• Стилі можуть бути задані трьома у різний спосіб- Вбудовані (всередині тегів), внутрішні ( всередині того ж HTML-файлу за допомогою елемента
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  
  
  

  Результат цього прикладу показано на рис. 1.

  Мал. 1. Застосування якості height

  Об'єктна модель

  document.getElementById("elementID ").style.height

  Браузери

  Браузер Internet Explorer 6 некоректно визначає height як min-height.

  У режимі сумісності Internet Explorer до версії 8.0 включно неправильно обчислює висоту елемента, не додаючи до неї значення відступів, полів і меж.

  Internet Explorer до версії 7.0 включно не підтримує значення inherit.

  Ця об'ємна стаття підручника буде присвячена важливим темам, Завдання яких полягає в тому, щоб розставити по поличках методи роботи з блочними елементами, оголошувати читачеві для чого застосовується зміна моделі обчислення ширини і висоти елементів, як керувати переповненням блокових елементів, і як працювати з мінімальними та максимальними розмірами елементів.

  При вивченні блокової моделі CSS ми розібрали, що властивості width і height встановлюють ширину та висоту внутрішньої області елемента ( content area), яка може містити текст, зображення та інші елементи.

  У блочній моделі CSS існує різниця між значеннями ширини та висоти, які ви задаєте для елемента та розміром простору, який браузер резервує для його відображення. Загальна ширина і висота елементів є область вікна браузера, яка складається з ширини і висоти внутрішніх відступів, кордонів і вказаних для них значень.

  Загальна ширина елемента обчислюється за такою формулою:

  div(width: 150px; /* встановлюємо ширину елемента */ height: 150px; /* встановлюємо висоту елемента */ padding: 10px; /* встановлюємо внутрішні відступи елемента */ border: 5px; /* встановлюємо межі елемента */ }

  У нашому випадку це рятує ситуацію, і нам не доведеться робити якихось обчислень, і надалі бояться будь-яких змін, які можуть знадобитися для наших елементів. Залишимо ці непотрібні обчислення на стороні браузера і подивимося на результат нашого прикладу:

  Для остаточного розуміння цієї моделі обчислення ширини та висоти елементів, закріпимо отримані знання на наступному прикладі:

  content-box
  class = "test2" > border-box
  
  
  

  Значення content-box властивості є значенням за промовчанням і здійснює розрахунок загальної ширини та висоти елемента за класичною схемою. На прикладі ширини:

  150 пікселів (значення ширини) + 10 пікселів (лівий внутрішній відступ) + 10 пікселів (правий внутрішній відступ) + 10 пікселів (ліва межа) + 10 пікселів (правий кордон) = 190 пікселів .

  Що стосується другого елемента, до якого ми застосували властивість зі значенням border-box , то значення користувача ширини і висоти елемента вже включають вміст елемента, межі (border) і внутрішні відступи (padding). У більшості випадків застосування властивості зі значенням border-box переважно на сторінках, оскільки робить очевидним кінцеві розміри елемента і дозволяє уникнути деяких непередбачених ситуацій, розглянутих вище.

  Результат нашого прикладу:

  Управління переповненням блокових елементів

  У процесі верстки у вас виникатимуть такі ситуації, коли вміст елемента відображатиметься поза межами елемента. За промовчанням браузер відображає такий вміст (переповнення елемента відображається), що в деяких випадках призводить до візуальних помилок. За таку поведінку браузера відповідає CSS властивість overflow. Розглянемо його можливі значення:

  Давайте розглянемо наступний приклад:

  overflow: visible

  class = "test2" >

  overflow: hidden

  З'їж ще цих м'яких французьких булок та випий чаю.
  class = "test3" >

  overflow: scroll

  З'їж ще цих м'яких французьких булок та випий чаю.
  class = "test4" >

  overflow: auto

  З'їж ще цих м'яких французьких булок та випий чаю.
  
  
  

  У цьому прикладі ми розмістили чотириблоку фіксованої ширини та висоти, для яких вказали різні значення CSSвластивості overflow:

  • Перший блок(значення visible ) – вміст виходить за межі елемента (значення за промовчанням).
  • Другий блок(значення hidden) – вміст, який переповнює елемент обрізається.
  • Третій блок(значення scroll ) – переповнення обрізається, але додається смуга прокручування.
  • Четвертий блок(значення auto ) – як і при значенні scroll , тільки смуга прокручування буде додана автоматично, якщо відбудеться переповнення блоку певної осі ( x- горизонтальною, або y- вертикальної), а не відображається на сторінці постійно.

  Результат нашого прикладу.