Содержание
Существуют разные методы отступа текста. Однако для совместимости с несколькими браузерами и обеспечения доступности мы обсудим наиболее популярные методы выделения текста на вашей веб-странице.
Рекомендуемый метод с CSS HTML
Для отступа в тексте или абзаце наиболее часто используемым и рекомендуемым методом будет использование CSS. Ниже приведены различные примеры того, как CSS может использоваться для отступа текста. Каждый из этих примеров будет размещен между вашими HTML-тегами.
В следующем примере будет создан класс стиля с именем «tab», который имеет отступ для текста и абзаца на 40 пикселей слева.
Как только приведенный выше код находится в разделе, вы можете использовать его в любой момент, добавив его в свой абзац (
) теги, как показано.
Пример вкладки
Включение CSS в ваш HTML-документ, как показано выше, называется «встроенным» CSS. Это полезно для быстрого внесения изменений, но в долгосрочной перспективе это сложно изменить позже.
Вместо этого вы можете взять весь свой CSS-код и поместить его в отдельный файл с расширением .css. Затем вы можете ссылаться на этот файл из любого HTML-документа, и этот документ может использовать эти свойства CSS. Использование внешнего файла CSS облегчает последующее изменение CSS, поскольку весь CSS определен в одном месте.
Чтобы создать ссылку на ваш внешний файл CSS, добавьте следующую строку в ваш HTML-документ в элемент (после
Как только этот файл .css создан, отредактируйте файл и добавьте тот же код CSS, за исключением тегов и comment, как показано.
.tab {margin-left: 40px; }
Наконец, как только вышеперечисленные шаги будут выполнены, вы можете использовать любой текст
пример, который мы показали выше.
Существуют и другие формы отступов. Например, если вы хотите сделать отступ только в первой строке абзаца, вместо использования указанной выше строки CSS, вы должны использовать следующую строку.
.tab {text-indent: 40px}
Чаевые
Вы также можете сделать отступ в процентах. Например, вместо отступа в 40px (пикселей) можно заменить отступ с 5% для текста с отступом на 5% текущего представления. Вы также можете использовать пробел em при определении ширины отступа.
Бонусный совет
Вы также можете изменить отступ от левого до правого, изменив поля left-left на margin-right.
Рекомендуемый метод с использованием HTML
Можно достичь тех же результатов, что и выше, используя встроенный стиль в HTML. Хотя использование приведенного выше примера CSS может облегчить поддержку на нескольких веб-страницах, если вам нужно использовать стиль только один раз, вы можете использовать следующий пример.
Этот текст имеет отступ.
В этом первом примере весь текст в теге абзаца имеет отступ 40 пикселей слева. Любые другие теги абзаца не имеют отступов.
Этот текст имеет отступ.
Во втором примере только первая строка текста в абзаце будет с отступом 40 пикселей слева. Любые дополнительные строки текста в этом абзаце не будут иметь отступа.
Чаевые
Вы также можете сделать отступ в процентах. Например, вместо отступа в 40px (пикселей) можно заменить отступ с 5% для текста с отступом на 5% текущего представления. Вы также можете использовать пробел em при определении ширины отступа.
Чаевые
Вы также можете изменить отступ от левого до правого, изменив поля left-left на margin-right.
Альтернативный метод
Другой распространенный (но неправильный) метод отступа текста — использование тегов, как показано в следующем примере. Хотя это гораздо более простое решение, существуют проблемы доступности, которые могут быть вызваны использованием этого решения для отступа в тексте. Этот тег предназначен для цитирования текста, а не для отступа.
Этот текст будет с отступом