Если вы начинающий веб дизайнер, одной из многих вещей, которые вам нужно будет понять на раннем этапе, является то, как белое пространство в коде сайта обрабатывается браузерами. Способ, где браузеры обрабатывают пустое пространство, сначала не очень интуитивно, особенно если вы попадаете в HTML и сравниваете его с тем, как белое пространство обрабатывается в программах обработки текстов, с которыми вы, возможно, более знакомы.
В программном обеспечении для обработки текстов вы можете добавить в документ множество интервалов или вкладок, а интервал будет отображаться в отображении содержимого документа. Это не относится к HTML или страницам. Таким образом, изучение того, как белое пространство действительно обрабатывается браузерами, очень важно.
У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.
Синтаксис CSS padding и margin
Синтаксис, который используется для единичного объявления свойства CSS margin:
Код
margin: 50px;
Этот код задает отступы во всех направлениях: сверху, снизу, слева и справа. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:
Ниже приведен html код, который формирует отступ текста с использованием text-indent. Из примера видно, что задавая для text-indent разные значения аргументов, мы можем изменять величину отступа текста:
Код
<p style="text-indent:100px"> HTML отступ текста, работает стиль CSS - text-indent </p>
На мой взгляд, этот способ задания отступа для текста, является самым оптимальным, но, тем не менее, рассмотрим еще один способ задания отступа, с использованием изображений.
В программном обеспечении для обработки текстов три основных символа пробела - это пробел, табуляция и возврат каретки. Каждый из них действует определенным образом, но в HTML браузеры делают их практически одинаковыми. Если вы размещаете одно место или 100 пробелов в своей разметке HTML или смешиваете свое расстояние с вкладками и возвратами каретки, все они будут сведены к одному пространству, когда страница будет отображаться браузером. В терминологии дизайна это называется крахом пробела.
Почему кто-то использует вкладки
Как правило, когда люди используют вкладки в текстовом документе, они используют их для макета или для перевода текста в определенное место или на определенное расстояние от другого элемента. В дизайне вы не можете использовать эти вышеупомянутые пробельные символы для достижения этих визуальных стилей или потребностей макета. В веб дизайне использование дополнительных символов пробела в коде будет просто для удобства чтения этого кода.
Веб дизайнеры и разработчики часто используют вкладки для кода отступа, чтобы они могли видеть, какие элементы являются дочерними элементами других элементов, но эти отступы не влияют на визуальный макет самой страницы. Для необходимых визуальных изменений макета вам нужно будет перейти к CSS (каскадные таблицы стилей).
Видео обзор по теме HTML отступ текста
Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px, а для заголовка второго уровня отступ сверху 20px и снизу 10px, а для всех параграфов зададим отступ сверху 10px.
Использование CSS для создания вкладок и интервалов HTML
Сегодня сайты построены с разделением структуры и стиля. Структура страницы обрабатывается HTML, а стиль продиктован CSS. Это означает, что для создания интервала или достижения определенного макета вам следует обратиться к CSS и не пытаться просто добавить символы интервала к HTML коду.
Если вы пытаетесь использовать вкладки для создания столбцов текста, вместо этого вы можете использовать элементы, которые расположены с CSS, чтобы получить макет столбца. Это позиционирование может быть выполнено с помощью поплавков CSS, абсолютного и относительного позиционирования или новых методов компоновки CSS, таких, как Flexbox или CSS.
Если данные, которые вы выкладываете, являются табличными данными, вы можете использовать таблицы для выравнивания этих данных по своему усмотрению. Таблицы часто получают плохой рэп в веб-дизайн, потому что в течение стольких лет они злоупотребляли как чистые макеты, но таблицы по-прежнему отлично подходят, если ваш контент содержит вышеупомянутые табличные данные.
Поля, отступы и текст-отступ
Наиболее распространенные способы создания интервала с CSS - это использование одного из следующих стилей CSS:
Например, вы можете отложить первую строку абзаца, как вкладку со следующим CSS, где обратите внимание, что это предполагает, что ваш абзац имеет атрибут класса «first», прикрепленный к нему.
Код
p.first { text-indent: 5em; }
Этот абзац теперь будет иметь отступ в 5 символов
Вы также можете использовать свойства margin или padding в CSS, чтобы добавить интервал в верхнюю, нижнюю, левую или правую (или комбинации этих сторон) элемента. В конечном счете, вы можете достичь любого расстояния, необходимого для перехода к CSS.
Перемещение текста более одного места без CSS
Если вы хотите, чтобы ваш текст был перемещен более чем на один пробег от предыдущего элемента, вы можете использовать неразрывное пространство. Чтобы использовать неразрывное пространство, вы просто добавляете столько раз, сколько вам нужно, в своей разметке HTML.
Например, если вы хотите переместить свое слово на пять пробелов, вы можете добавить следующее перед словом.
Код
<p align="left">Выравниваем абзац по левому краю.</p> <p align="right">Выравниваем абзац по правому краю.</p> <p align="center">Выравниваем абзац по центру.</p> <p style="text-align-last: justify;">Выравниваем абзац по ширине.</p>
В оформлении веб-страниц это встречается не так часто, но все же встречается и для того чтобы закрыть эту потребность вам нужно знать лишь одно свойство text-indent: 10%; которое я применю к следующему абзацу при помощи этого кода:
Код
<p style="text-indent: 10%;"></p>
HTML уважает их и не сводит их до одного места. Однако это считается очень плохой практикой, поскольку он добавляет дополнительную HTML-разметку в документ только для достижения потребностей макета. Возвращаясь к этому разделению структуры и стиля, вы должны избегать добавления неразрывных пробелов просто для достижения желаемого эффекта макета и вместо этого использовать поля CSS и дополнения.
Создание пространств и физическое разделение элементов в HTML может быть трудно понять для начинающего веб-дизайнера. Это связано с тем, что HTML имеет свойство, известное как «провал пробела». вводите ли вы 1 пробел или 100 в свой HTML-код, веб-браузер автоматически сворачивает эти пространства до одного места.
Чтоб понятнее было, то объединяем следующее: margin: 30px 10px 5px 20px;
Видно как изображение сместилось относительно родительского элемента.
Если же прописать margin: 30px, то отступы css будут одинаковые со всех четырех сторон и будут равны 30 пикселям.
В CSS вы можете использовать свойства margin или padding для добавления пространства вокруг элементов. Кроме того, свойство text-indent добавляет пространство перед текстом, например, для отступов.
Вот пример использования CSS для добавления пространства перед всеми вашими параграфами. Добавьте следующий CSS в свою внешнюю или внутреннюю таблицу стилей:
Код
p { text-indent: 3em; }
Есть варианты указания двух и трех значений в спецификации: margin:10px 20px;. Данный параметр сделает так, что появятся внешние отступы на css сверху и снизу 10px, слева и справа 20px;
Три значения: margin:10px 20px; 30px;. Здесь сверху будет отступ 10 точек, слева и справа по 20, а снизу 30.
Часто для начинающих верстальщиков не всегда получается сразу запомнить все возможные комбинации, поэтому на начальных этапах можно использовать параметры: margin-top, margin-right, margin-left и margin-bottom. Top - вверх, right-право, left-лево, bottom-снизу.
Например вам нужно задать внутренний отступ в ячейке таблицы. Нужно будет прописать следующее:
Код
<td style="padding:5px;">Текст</td>
Таким образом вокруг слова "Текст" появятся внутренние отступы в 5 точек со все четырех сторон.
Для целей этой статьи я использую неупорядоченные списки. Тот же CSS может быть применен с аналогичными результатами к упорядоченным спискам. Если не указано иное, все примеры в этой статье используют следующий код для списков.
Код
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5 we'll make a bit longer so that it will wrap</li> </ul>
Каждый список просто помещается в другой DIV, а CSS написан так, что поведение списка определяется DIV, в котором он находится. Каждый DIV имеет базовое правило:
Отметьте элементы в маркированном или пронумерованном списке в электронном письме кампании определенной величиной пикселя в виде кода кода. После того, как вы добавили маркированный или нумерованный список в свою электронную почту, связанную с событиями электронную почту, вы можете использовать текстовый редактор для элементов списка отступов , но иногда вам нужно немного больше контролировать, насколько широкий отступ.
1. Найдите раздел кода для заказанного ol или неупорядоченного ul списка и добавьте следующий код для установки полей отступа:
- Упорядоченный список - это корректирует маржу всех элементов списка в нумерованном списке.
Код
<ol style="margin-left: 10px;">
- Unordered List (Список неупорядоченных) - это корректирует маржу всех элементов списка в маркированном списке.
Код
<ul style="margin-left: 10px;">
- Элемент списка - это настройка поля для определенного элемента списка.
Код
<li style="margin-left: 10px;">
Имейте в виду, что элементы списка в
имеют как минимум 30px стандартного отступа для начала.
2. Замените номер красным цветом на количество пикселей, которое вы хотите установить в качестве ширины отступа. В приведенном ниже примере список кодируется таким образом, что все элементы списка автоматически отступаются на 8 пикселей, за исключением тех случаев, когда код добавляется к дополнительному отступу во втором элементе списка до 16 пикселей.
Что еще изменилось , так как я думаю о CSS, и базовая структура, к которому она применяется HTML. Например, что большинство страниц в интернете содержат меню ссылок в области навигации. Они часто обозначаются как строка ссылок, часто в отдельных DIV или абзацах. Структурно, однако, они представляют собой список ссылок и должны быть отмечены как таковые.
