Спосіб, як браузери обробляють пробіли, спочатку не дуже інтуїтивний, особливо якщо порівняти, як мова розмітки гіпертексту обробляє пробіли щодо програм обробки текстів. У програмному забезпеченні для обробки текстів ви можете додати багато інтервалів або вкладок у документ, і цей інтервал відображатиметься у відображенні вмісту документа. Цей дизайн WYSIWYG не стосується HTML або веб-сторінок.
Змістовий покажчик
Інтервал у друку
У текстовому програмному забезпеченні трьома основними пробілами є символи простору, вкладку, і повернення карети. Кожен із цих символів діє по-різному, але в HTML браузери роблять їх по суті однаковими. Якщо ви розміщуєте один пробіл або 100 пробілів у вашій HTML-розмітці або змішуєте інтервал з вкладками та поверненнями кареток, усі вони будуть згущені до одного пробілу, коли сторінка відображається браузером. У термінології веб-дизайну це відомо як обвал білого простору. Ви не можете використовувати ці типові клавіші інтервалу для додавання пробілів на веб-сторінці, оскільки браузер згортає повторювані пробіли лише в один простір, коли він відображається у браузері,
Використання CSS для створення вкладок та інтервалів HTML
Сьогодні веб-сайти побудовані з розділенням структури та стилю. Структура сторінки обробляється HTML, а стиль диктується каскадними таблицями стилів. Щоб створити інтервал або досягти певного макета, зверніться до CSS, замість того, щоб додавати символи інтервалу в HTML-код. Якщо ви намагаєтеся використовувати вкладки для створення стовпців тексту, замість цього використовуйте елементи
Поля, відступи та відступ тексту
Найпоширеніші способи створення інтервалів за допомогою CSS – це використання одного з наступних стилів CSS:
- маржа
- прокладка
- текст-відступ
Наприклад, відступите перший рядок абзацу як вкладку з наступним CSS (зауважте, що це передбачає, що до вашого абзацу додається атрибут class «first»): p.first {
відступ тексту: 5em;
}
Цей абзац робить відступи близько п’яти символів. Використовуйте властивості полів або відступів у CSS, щоб додати інтервал у верхній, нижній, лівій або правій частині (або комбінації цих сторін) елемента. Досягніть будь-якого інтервалу, необхідного, звернувшись до CSS.
Переміщення тексту більше одного простору без CSS
Якщо все, що ви хочете, – щоб ваш текст перемістився на більше, ніж один простір від попереднього елемента, використовуйте нерозривний пробіл. Щоб використовувати нерозривний простір, додайте & nbsp; стільки разів, скільки вам потрібно у вашій HTML-розмітці. HTML поважає ці нерозривні пробіли і не згортає їх до єдиного простору. Однак такий підхід вважається поганою практикою, оскільки він додає додаткову розмітку HTML до документа лише для досягнення потреб у макеті. Коли це можливо, уникайте додавання нерозривних пробілів просто для досягнення бажаного ефекту макета, а використовуйте замість них поля CSS та відступи.