Html отступ текста


Отступ текста в HTML при помощи margin

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока <div>, тег таблицы <table>, абзаца <p>, секции <section> и так далее.

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Делается это так:

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

HTML:

CSS:

При помощи этого свойства мы можем задать разные отступы тексту в HTML:

  • margin-left — расстояние слева
  • margin-right — расстояние справа
  • margin-top — расстояние сверху
  • margin-bottom — расстояние снизу

Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:

  • margin: 10px; — делаем отступ текста 10px со всех сторон
  • margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
  • margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px

Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.

Отступ текста в HTML при помощи padding

Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.

Так же можно присвоить класс в HTML коде или воспользоваться уже существующим и дописать это свойство ему:

CSS:

С его помощью так же можно задать разные отступы текста в HTML:

  • padding-left — слева
  • padding-right — справа
  • padding-top — сверху
  • padding-bottom — расстояние снизу
  • padding: 25px; — отступ со всех сторон.

Отступ текста html при помощи неразрывного пробела

Сразу скажу что я этот способ не люблю и не рекомендую, но иногда он может понадобится. Суть его заключается в том что в HTML есть специальный тег, который позволяет добавлять неразрывный пробел  


  • Если вы поставите этот тег в тексте между слов или вначале строки то он создаст отступ равный по ширине 1 пробелу. Поставив несколько   вы можете увеличить расстояние между словами.
  • Если поставить   между строк то он создаст вертикальный отступ равный по высоте одной строке. Дописав несколько   (каждый с новой строки) можно увеличить это расстояние.

HTML:

Отступ текста в HTML при помощи text-indent

Если вам нужно задать отступ в HTML не для всего текста на странице, а лишь только для первой строчки одного или нескольких абзацев, то это можно сделать при помощи свойства text-indent

HTML:

Что делать если отступ не появляются?

Бывают ситуации, когда вы задаёте отступ текста HTML одним из предложенных способов, а он не применяется.
Причин здесь может быть несколько. Наиболее распространённые описаны в этой статье: «Почему не работают CSS-стили?»

Если вы знаете ещё какие то способы как сделать отступ текста HTML напишите их в комментариях. Если статья была для вас полезной — делитесь ей в социальных сетях. Так вы помогаете мне развивать сайт.

Успехов вам в оформлении ваших сайтов и не только!

С уважением Юлия Гусарь

impuls-web.ru

Абзацы


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

Текст, размещаемый на веб-страницах, не является исключением, он также должен иметь логическую, понятную каждому пользователю, структуру. Ведь от того, насколько удобно и просто будет восприниматься текст на странице, зависит многое: прежде всего, какое впечатление сложится у посетителя о вашем сайте.

Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег <p>, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).

 <p>Абзац</p> 

Не забывайте про закрывающий тег

Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.

 <p>Абзац <p>Другой абзац</p> 

Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.

Красная строка


Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.

Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.

Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:

 <html>  <head>  <style> 	 p { text-indent: 25px; } 	</style>  <head>  <body>   <p>  Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым 	 некоторые относят и красную строку, считая, что употребление ее не так уж и важно. 	 Однако надо понимать, что любая запятая несет в себе как эстетическую, так 	 и смысловую нагрузку, а не только является данью правилам грамматики – это 	 касается и форматирования.  </p>   </body> </html> 

В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.


 <p style="text-indent: 25px;">  Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым  некоторые относят и красную строку, считая, что употребление ее не так уж и важно.  Однако надо понимать, что любая запятая несет в себе как эстетическую, так  и смысловую нагрузку, а не только является данью правилам грамматики – это  касается и форматирования. </p> 

Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).

Перенос строки

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

Обратите внимание, что вы не сможете изменить вид отображения текста на странице с помощью добавления в код дополнительных пробелов или переносов строки. Любое количество пробелов и переносов строк будет считаться как один пробел, так как браузер будет автоматически удалять все лишние пробелы и переносы строк, в этом случае браузер отобразит отрывок стихотворения в виде одного предложения:


 <html>  <body>   <p>  Заглянула осень в сад -  Птицы улетели.  За окном с утра шуршат  Жёлтые метели.  </p>   <p>Обратите внимание, что браузер игнорирует ваше форматирование текста</p>   </body> </html> 

В таких случаях самым лучшим выходом из ситуации будет использование тега <br> (вставляет перенос строки). Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег <br>. Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать <br></br>, а разве это было бы удобнее?!

Примите во внимание, что краткое описание придумано и используется не из-за лени, а для повышения эффективности, за счет более легкого чтения кода. И в самом деле, спустя некоторое время, проведенное за чтением HTML-кода, вы увидите, что такие элементы легче воспринимаются и запоминаются.

 <html>  <body>   <p>Это обычный<br> абзац с разры-<br>вом строки</p>   </body> </html> 

Для переноса текста на несколько строк тег <br> ставится соответствующее количество раз.

« перейти к предыдущей теме перейти к следующей теме »


web.ryusupov.com

Задание красной строки


В HTML нет встроенной возможности задать отступ для первой строки абзаца. Такой отступ называется красной строкой. Мы немного отойдем от основной темы учебного курса и покажем два способа реализации красной строки с помощью CSS[1].

Чтобы задать стиль отдельного элемента необходимо использовать его атрибут style. В значении этого атрибута будут располагаться CSS-стили, описывающие правила отображения. CSS имеет свой набор свойств, применимых к тем или иным элементам. В настоящий момент нам необходимо свойство text-indent. Оно как раз и задает отступ первого предложения, что позволяет нам создать красную строку. Установим это свойство в значение 1.5em. Оно равно одной целой и половине высоты строки.

Полное выражение по формированию отступа у первой строки абзаца записывается как «<p style=“text-indent: 1.5em“>содержание…</p>».

Если вы хотите задать отступ красной строки сразу для всех абзацев, присутствующих на странице, можете использовать пример, который мы приведем ниже. В нем, в обязательный элемент <head> добавлен элемент <style> со следующим содержанием «p { text-indent: 1.5em }». В задачи тега <style> входит добавление стилей прямо в HTML-разметку страницы, без подключения отдельного файла.

coder-booster.ru

Източник.

      HTML отступ текста – в процессе создания сайта, нам много приходится работать с текстовыми блоками, или текстовыми фразами.         Однажды, мне нужно было добавить текстовую фразу, таким образом, чтобы перед этой текстовой фразой был некоторый отступ текста от края html блока, в который данный текст добавлялся.


      Казалось бы, простая задача, но в процессе ее решения, я столкнулся с тем, что данную задачу можно решить несколькими способами. В этой статье я хочу поделиться,   каким образом, можно сделать отступ текста используя  средства html.

      Итак, html отступ текста, способ первый — самый, естественный и простой. Чтобы сделать отступ перед текстом,  добавим перед текстом html код пробела — &nbsp; Добавить html код пробела  можно в любом html редакторе.

      Привожу пример рабочего кода задания отступа для текста, с помощью кода пробела:

 <html> <head> <title>HTML отступ текста</title> </head> <body> <p>&nbsp;&nbsp;&nbsp;&nbsp; HTML отступ текста слева, используем код пробела</p> </body> </html>

        В данном примере, перед выбранным нами текстом код пробела — &nbsp; добавлен четыре раза, в результате, получим нужный нам отступ.

      Мы знаем, что код пробела отрабатывается любым браузером. Поэтому, добавив необходимое количество пробелов  перед текстом, можно получить необходимый отступ для текста.

      Этот способ хорош тем, что он будет гарантированно отработан любым браузером.

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

      Одним из вариантов решения этой проблемы, является следующий способ задания отступа.

      HTML отступ текста, способ второй — этот способ основан на свойствах тега blockquote.  Данный тег задает отступ примерно 40 пикселей  слева и справа, для размещенного в нем текста. Кроме того, отступ задается сверху и снизу. Пример html кода использования  данного способа приведен ниже:

 <p><blockquote> HTML отступ текста слева, используем тег blockquote </blockquote></p>

      Как видите, данный способ задания отступа для текста, очень прост в использовании, но и этот способ тоже имеет существенный недостаток. Отступ, который задает тег blockquote, является фиксированным и всегда равен одной и той же величине – 40px.

      Чтобы исправить ситуацию, и  при добавлении html отступа для текста иметь возможность задать любую величину, воспользуемся третьим способом.

      HTML отступ текста, способ третий.

        Здесь мы воспользуемся свойством параметра  text-indent каскадных таблиц стилей CSS.

      Если открыть справочник CSS, на странице с описанием свойств text-indent, то мы увидим, что с помощью text-indent,  мы можем задавать величину отступа первой строки или первого абзаца, какого-либо блока текста.

      Мы рассматриваем, пример с коротки текстовым блоком, поэтому  свойства text-indent вполне подходят для нашего случая.

      Ниже приведен html код, который формирует отступ текста с использованием text-indent. Из примера видно, что задавая для text-indent  разные значения аргументов, мы можем изменять величину отступа текста:

 <p style="text-indent:100px"> HTML отступ текста, работает стиль CSS - text-indent </p>

      На мой взгляд, этот способ задания отступа для текста, является самым оптимальным, но, тем не менее, рассмотрим еще один способ задания отступа, с использованием изображений.

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

      В качестве рабочего примера, сразу рассмотрим html код, который демонстрирует работу данного способа:

<p><img src=image.png width=150 height=1> HTML отступ текста слева,  используем изображение </p>

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

      В качестве изображения можно использовать изображение, ширина и высота которого, равны одному пикселу.  Чтобы применяемое нами изображение не было видно на странице, зададим для него цвет точно такой же, как фона страницы сайта.

      На мой взгляд, приведенных выше способов задания отступов для текста вполне достаточно, чтобы организовать нужный Вам отступ в любой ситуации, при добавлении контента на страницу Ваших сайтов.

      Автор: Виктор Милованов

balamut4uma.livejournal.com

HTML отступ текстаHTML отступ текста – в процессе создания сайта, нам много приходится работать с текстовыми блоками, или текстовыми фразами. Однажды, мне нужно было добавить текстовую фразу, таким образом, чтобы перед этой текстовой фразой был некоторый  отступ текста от края html  блока, в который данный текст добавлялся.

Казалось бы, простая задача, но в процессе ее решения, я столкнулся с тем, что данную задачу можно решить несколькими способами. В этой статье я хочу поделиться,   каким образом, можно сделать отступ текста используя  средства html.

Итак, html отступ текста, способ первый — самый, естественный и простой. Чтобы сделать отступ перед текстом,  добавим перед текстом html код пробела — &nbsp; Добавить html код пробела  можно в любом html редакторе.

Привожу пример рабочего кода задания отступа для текста, с помощью кода пробела:

<html> <head> <title>HTML отступ текста</title> </head> <body> <p>&nbsp;&nbsp;&nbsp;&nbsp; HTML отступ текста слева, используем код пробела</p> </body> </html>

В данном примере, перед выбранным нами текстом код пробела — &nbsp; добавлен четыре раза, в результате, получим нужный нам отступ.

 

Мы знаем, что код пробела отрабатывается любым браузером. Поэтому, добавив необходимое количество пробелов  перед текстом, можно получить необходимый отступ для текста.

Этот способ хорош тем, что он будет гарантированно отработан любым браузером.

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

Одним из вариантов решения этой проблемы, является следующий способ задания отступа. 

HTML отступ текста, способ второй — этот способ основан на свойствах тега blockquote.  Данный тег задает отступ примерно 40 пикселей  слева и справа, для размещенного в нем текста. Кроме того, отступ задается сверху и снизу. Пример html кода использования  данного способа приведен ниже:

<p><blockquote> HTML отступ текста слева, используем тег blockquote </blockquote></p>

Как видите, данный способ задания отступа для текста, очень прост в использовании, но и этот способ тоже имеет существенный недостаток. Отступ, который задает тег blockquote,  является фиксированным и всегда равен одной и той же величине – 40px.

Чтобы исправить ситуацию, и  при добавлении html отступа для текста иметь возможность задать любую величину, воспользуемся третьим способом.

HTML отступ текста, способ третий.

Здесь мы воспользуемся свойством параметра  text-indent каскадных таблиц стилей CSS.

Если открыть справочник CSS, на странице с описанием свойств text-indent, то мы увидим, что с помощью text-indent,  мы можем задавать величину отступа первой строки или первого абзаца, какого-либо блока текста.

Мы рассматриваем, пример с коротки текстовым блоком, поэтому  свойства text-indent вполне подходят для нашего случая. 

Ниже приведен html код, который формирует отступ текста с использованием text-indent. Из примера видно, что задавая для text-indent  разные значения аргументов, мы можем изменять величину отступа текста:

<p style="text-indent:100px"> HTML отступ текста, работает стиль CSS - text-indent </p>

На мой взгляд, этот способ задания отступа для текста, является самым оптимальным, но, тем не менее, рассмотрим еще один способ задания отступа, с использованием изображений.

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

В качестве рабочего примера, сразу рассмотрим html код, который демонстрирует работу данного способа:

<p><img src=image.png width=150 height=1> HTML отступ текста слева,  используем изображение </p>

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

В качестве изображения можно использовать изображение, ширина и высота которого, равны одному пикселу.  Чтобы применяемое нами изображение не было видно на странице, зададим для него цвет точно такой же, как фона страницы сайта.

На мой взгляд, приведенных выше способов задания отступов для текста вполне достаточно, чтобы организовать нужный Вам отступ в любой ситуации, при добавлении контента на страницу Ваших сайтов.

Автор: Виктор Милованов

sozdavaite-sait.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перевод статьи “How do I indent or tab text on my web page or in HTML?” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

smarticle.ru

Абзацы в HTML

Применение абзацев необходимо для того, чтобы выдерживать без изменения уникальную структуру текста, создаваемую автором. Так, на части делятся книги и журналы, газеты и разделы в колонках. Структурирование текстов по фрагментов в HTML делается при помощи абзацев — чтобы была понятная логическая структура, удобная для восприятия, да еще и отображалась во всех браузерах корректно.

Блоки текста в HTML разделяются между собой при помощи тегов абзаца <p></p>. По вертикали между абзацами появляется небольшой отступ или отбивка.

Как разделить текст абзацами? Пример:

Результат

Первый абзац, помещенный в теги p

Второй абзац, помещенный в теги p

То есть абзац начинается с тега <p> и заканчивается закрывающим его тегом </p>. При этом между различными смысловыми блоками в цельном тексте создаются паузы (до абзаца и после него появляются пустые строки, отступы), повышая читабельность текста, улучшая компоновку и внешний вид длинных и сложных текстов.

Если между вашими абзацами получаются слишком большие отступы (пустые строки), не вздумайте использовать тег <br> для их уменьшения, лучше обратите внимание на файл style.css, в котором прописаны параметры отступов между абзацами. Тег <br> используется для переноса строки — это совсем другое и не следует использовать его для создания абзацев. Что такое перенос строки и зачем он нужен, читайте тут.

Что вы найдете в файле style.css? Вы найдете параметры отступов, стили margin и padding (надеюсь вы знаете о разнице между этими свойствами) применяемые к абзацу и задающие для него отступы, в том числе сверху и снизу. Найдя эти стили, вы сможете их изменить, увеличив или уменьшив отступы между абзацами.

Атрибуты тега абзаца в HTML

тег абзаца в HTML

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

Результат:

Выравниваем абзац по левому краю.

Выравниваем абзац по правому краю.

Выравниваем абзац по центру.

Выравниваем абзац по ширине.

Бонус — красная строка и отступы в абзаце

Для удобства восприятия письменного текста в школе нас заставляли делать на первой строке абзаца «красную строку» — небольшой отступ слева от линии основного текста.

В оформлении веб-страниц это встречается не так часто, но все же встречается и для того чтобы закрыть эту потребность вам нужно знать лишь одно свойство text-indent: 10%; которое я применю к следующему абзацу при помощи этого кода:

Обратите внимание, что я делаю это для примера и поэтому применил свойство в HTML, а не в файле CSS (что такое CSS и зачем он нужен?). Если вы хотите отредактировать подобным образом все абзацы на вашем сайте, добавив красную строку, нужно внести изменения в файл style.css.

Либо добавьте в HTML-код страницы код (можно задавать размер отступа в px, либо в %):

Ну вот и все что нужно вам знать по этой теме. А в следующих статьях я расскажу вам о тегах <NOBR> и <BR>, которые применяются в особых случаях.

blogwork.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.