Как сделать табуляцию или отступ в HTML?

Есть разные способы установки HTML отступов перед текстом. Но для совместимости с различными браузерами и доступности, мы обсудим самые популярные методы:

Рекомендованный способ в CSS и HTML

Чтобы сделать отступ перед текстом или абзацем, лучше использовать CSS. Ниже приведены примеры того, как смещать надписи с помощью каскадных таблиц стилей. Вставьте каждый из приведенных примеров кода между тегами HTML <head></head>.

Следующий код создает CSS-класс "tab", который отодвигает символы и абзац на 40 пикселей от левого края:

<style type="text/css">
<!--
.tab { margin-left: 40px; }
-->
</style>

Вставив приведенный выше код в раздел <head>, можно выполнить его в любом месте, добавляя его в теги абзаца (<p>), как показано ниже:

<p class="tab">Образец табуляции</p>

Если вы планируете применять этот стиль на нескольких страницах, лучше создать файл .css и связать его со всеми веб-страницами. Чтобы сделать отступ в HTML, добавьте следующую строчку между тегами <head> и создайте ссылку на файл. Мы назвали его "basic.css":

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега <style> и меток комментирования, как показано ниже:

.tab { margin-left: 40px; }

Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый <p class="tab">, показанный выше.

Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:

.tab { text-indent:40px }

Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.

Бонусная подсказка как сделать отступ в HTML: Чтобы поменять HTML отступ слева на отступ справа, измените свойство margin-left на margin-right.

Рекомендованный метод в HTML

Можно достичь тех же результатов используя стиль, встроенный в HTML- код. Хотя применение CSS делает управление многочисленными веб-страницами легче, если использовать стиль только один раз:

<p style="margin-left: 40px">Это текст с отступом.</p>

Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги <p> не смещены.

<p style="text-indent: 40px">Это текст с отступом.</p>

А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.

Подсказка: можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.

Бонусная подсказка: Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.

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

Другой часто применяемый метод, позволяющий создать HTML отступ текста - с помощью <blockquote>, как показано ниже.

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

<blockquote>Эта строка будет сдвинута.</blockquote>

Пожалуйста, оставьте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, лайки, отклики, подписки!

Пожалуйста, оставьте ваши комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!

КККонстантин Кондрусинавтор статьи «How do I indent or tab text on my web page or in HTML?»