Как сделать отступ или вкладку текста на моей веб-странице или в HTML?

HTML

Существуют разные методы отступа текста. Однако для совместимости с несколькими браузерами и обеспечения доступности мы обсудим наиболее популярные методы выделения текста на вашей веб-странице.

Рекомендуемый метод с 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.

Альтернативный метод

Другой распространенный (но неправильный) метод отступа текста — использование тегов, как показано в следующем примере. Хотя это гораздо более простое решение, существуют проблемы доступности, которые могут быть вызваны использованием этого решения для отступа в тексте. Этот тег предназначен для цитирования текста, а не для отступа.

Этот текст будет с отступом
Ссылка на основную публикацию