Отступ текста в html – «Как делать отступы в HTML?» – Яндекс.Знатоки — Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Содержание

Как сделать отступ текста в html — Seoblog

Отступ текста в 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

www.internet-technologies.ru

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

блока, в который данный текст добавлялся.

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

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

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

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

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

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

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

Но у данного способа есть существенный недостаток. Для того, чтобы сделать отступ для текста достаточно большой по длине, в 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> HTML отступ текста, работает стиль CSS - text-indent </p>

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

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

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

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

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

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

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

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

sozdavaite-sait.ru

Внутренние отступы блоков

За внутренние отступы в CSS отвечает свойство padding. Итак, давайте рассмотрим пример задания внутренних отступов у блока:

padding-top: 5px; /*верхний внутренний отступ*/ padding-left: 8px; /*левый внутренний отступ*/ padding-right: 8px; /*правый внутренний отступ*/ padding-bottom: 5px; /*нижний внутренний отступ*/

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

margin: 5px 8px 5px 8px; /*верхний, правый, нижний, левый внешние отступы*/ margin: 5px 8px 5px; /*описывает верхний, левый и правый, нижний отступы*/ margin: 5px 8px; /*описывает верхний и нижний, правый и левый отступы*/ margin: 7px; /*описывает все внутренние отступы по 7px*/

Запомнить проще первый и последний способы. В первом случае отступы ставятся по часовой стрелке (верхний, правый, нижний, левый) — величину отступа мы можем указать любую, в последнем случае отступы со всех сторон будут одинаковые.

Внешние отступы блоков

За внешние отступы в CSS отвечает свойство margin. Примеры внешних отступов в CSS:

Пример 1.

margin-top: 5px; /*верхний внешний отступ*/ margin-left: 10px; /*левый внешний отступ*/ margin-right: 10px; /*правый внешний отступ*/ margin-bottom: 5px; /*нижний внешний отступ*/

Пример 2.

padding: 5px 10px 5px 10px; /*верхний, правый, нижний, левый внешние отступы*/ padding: 5px 10px 5px; /*описывает верхний, левый и правый, нижний отступы*/ padding: 5px 10px; /*описывает верхний и нижний, правый и левый отступы*/ padding: 7px; /*описывает все внешние отступы по 7px*/

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

siteblogger.ru

Абзацы в HTML

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

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

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

Результат

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

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

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

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

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

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

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

Результат:

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

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

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

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

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

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

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

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

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

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

blogwork.ru

Установка отступов за счет вставки пробелов

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

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

Применение тега цитирования

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

Здесь придётся использовать blockquote, позволяющий передвинуть фрагмент слева и справа примерно на 40 px. Достаточно написать код, идентичный с приведённым примером:

Метод позволяет манипулировать фразами в рамках фиксированной величины 40 px. Также стоит отметить, что в данный тег обычно заключают цитату.

Альтернативные варианты

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

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

В первом случае устанавливаются лишь значения отступа от краев картинки. Во втором задается положение изображения по левому краю с обтеканием текста по правому, а в третьем – наоборот.

Информация подошла к завершению. Скажите, вы нашли интересующие сведения? Ответ можно написать в комментариях.

Напоследок упомяну, что блог Workip посвящен преимущественно денежным вариантам заработка в сети. А вы знаете какие именно способы являются действительно перспективными в финансовом плане? Описания некоторых из них уже опубликованы.

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

workip.ru

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

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

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

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

 <!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Пример красной строки одного абзаца</title>  </head>  <body>  <!-- Абзац с заданным отступом -->  <p>Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Aenean commodo ligula  eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus.  Donec quam felis, ultricies nec, pellentesque eu, pretium  quis, sem. Nulla consequat massa quis enim. Donec pede  justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>    <!-- Обычный абзац -->  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis  natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus.Donec quam felis, ultricies nec, pellentesque  eu, pretium quis, sem. Nulla consequat massa quis enim. Donec  pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>  </body> </html>

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

 <!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Пример красной строки для всех абзацев</title>  <style>             p {                  text-indent: 1.5em;              }         </style>  </head>  <body>  <p>Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Aenean commodo ligula  eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus.  Donec quam felis, ultricies nec, pellentesque eu, pretium  quis, sem. Nulla consequat massa quis enim. Donec pede  justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis  natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus.Donec quam felis, ultricies nec, pellentesque  eu, pretium quis, sem. Nulla consequat massa quis enim. Donec  pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>  </body> </html>

coder-booster.ru

<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Отступы в html документе</title> </head> <body> <div style=»float:left; padding-right:30px;»><img src=»img/car.jpg» width=»250″ height=»169″ alt=»Машина» /></div> <p>»Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.» Абзац 1.10.32 «de Finibus Bonorum et Malorum», написанный Цицероном в 45 году н.э. «Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?» Английский перевод 1914 года, H. Rackham «But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?» Абзац 1.10.33 «de Finibus Bonorum et Malorum», написанный Цицероном в 45 году н.э. «At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.» Английский перевод 1914 года, H. Rackham «On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.»</p> </body> </html>

smarticle.ru

seoblog.life

Как в HTML сделать отступ текста – инструкция к применению

Доброго времени суток! Установка отступов для текста и картинок – основная тема сегодняшней публикации. Рассмотрим подробнее, какие подходы можно применить на практике.

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

Установка отступов за счет вставки пробелов

Применение тега цитирования

Альтернативные варианты

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

workip.ru

отступы | htmlbook.ru

Аня написала следующий код (пример 1) и получила страницу, показанную на рис. 1. Но Ане нужно, чтобы не было отступов между блоками, а также справа и слева от блоков. Какие изменения в код для этого требуется внести?

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

Когда требуется установить абзацный отступ, лучше всего использовать стилевое свойство text-indent. Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения. Ширина текстового блока при этом не меняется и остается исходно заданной. Величину отступа можно указывать в пикселах, процентах или других доступных единицах (пример 1).

Используйте стилевое свойство margin-top (отступ сверху) и margin-bottom (отступ снизу) для селектора UL или OL, в зависимости от типа списка. Также можно воспользоваться универсальным свойством margin.

Отступы на веб-странице хотя и не видны, но не позволяют содержимому плотно прилегать к краям окна браузера, чтобы обеспечивать комфортность чтения. Свое собственное значение отступов можно установить, изменяя значения свойства margin у селектора body.

При добавлении формы через тег <form> вокруг нее сверху и снизу автоматически добавляются отступы. Чтобы их убрать, используйте стилевое свойство margin с нулевым значением, добавляя его к селектору FORM.

При использовании тега <p> автоматически добавляются отступы сверху и снизу от текстового абзаца. Это сделано для того, чтобы визуально отделить один блок текста от следующего. Понятно, что значения отступов, которые заданы по умолчанию, устраивают не всегда, поэтому иногда их приходится уменьшать или увеличивать. Для этого можно использовать универсальное свойство margin, оно определяет отступы со всех сторон абзаца или margin-top для отступа сверху и margin-bottom — для отступа снизу.

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

Подпишитесь на материалы сайта по RSS

htmlbook.ru

Отступ в HTML — Баламут Чума — LiveJournal

Източник.

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

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

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

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

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

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

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

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

<p> HTML отступ текста, работает стиль CSS - text-indent </p>

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

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

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

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

balamut4uma.livejournal.com

Отступ первой строки (свойство text-indent)

`text-indent`

<style>
div {
  text-indent: 0;
}
</style>

<div><code>text-indent</code> наследуется, применяется к блочным элементам, изменяет текст и строчные элементы</div>

Что такое `text-indent` CSS

Положительное значение свойства text-indent определяет длину отступа первой строки элемента. Отрицательное значение — длину выступа.

Значение text-indent в процентах устанавливает отступ или выступ первой строки элемента в процентах от ширины элемента.

Красная строка в HTML: как сделать отступ первой строки абзаца

Разбивать текст на абзацы следует с помощью тега <p>.

У тега <p> могут быть следующие дочерние элементы [w3.org]: a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr.

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

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

<style>
p {
  text-indent: 2em;
}
mark {
  display: inline-block;
}
</style>

<p>Разбивать текст на абзацы следует с помощью тега <code>&lt;p&gt;</code>.
<p><a href="https://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-p-element">У тега <code>&lt;p&gt;</code> могут быть следующие дочерние элементы [w3.org]</a>: a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr.
<p><img alt="Заяц" src="http://2.bp.blogspot.com//-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> И все эти дочерние элементы дружно отодвигаются, находясь на первой строке.
<p>Неудобно, что свойство наследуется и у <mark>inline-block элементов</mark> тоже присутствует отступ слева до содержимого. На <i>inline элементы</i> оно не распространяется, так как должно быть задано только блочным элементам.

Запретить наследование `text-indent`

Теперь свойство не наследуется и у inline-block элементов отсутствует отступ слева до содержимого.

<style>
p {
  text-indent: 2em;
}
p * {
  text-indent: 0;
}
mark {
  display: inline-block;
}
</style>

<p>Теперь свойство не наследуется и у <mark>inline-block элементов</mark> отсутствует отступ слева до содержимого.

Отодвигать только текст красной строки абзаца

Предложение после картинки не смещёно, так как оно находится уже на второй строке.

<style>
p {
  text-indent: 2em;
}
p img {
  display: block; 
}
</style>

<p><img alt="Заяц" src="http://2.bp.blogspot.com//-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> Предложение после картинки не смещёно, так как оно находится уже на второй строке.

Вместо text-indent можно использовать margin для псевдоэлемента ::first-letter.

Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.

<style>
p:first-letter {
  margin-left: 2em;
}
</style>

<p>Вместо <code>text-indent</code> можно использовать <code>margin</code> для <a href="http://shpargalkablog.ru/2012/02/before-after-css.html">псевдоэлемента <code>::first-letter</code></a>.
<p><img alt="Заяц" src="http://2.bp.blogspot.com//-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.

shpargalkablog.ru

Как изменить расстояние между абзацами текста?

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

Изменить расстояние между абзацами текста создаваемых с помощью тега <p>.

Решение

Пример 1. Изменение значения отступов у абзаца

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Отступы в тексте</title>
  <style>
   p {
    margin-top: 0.5em; /* Отступ сверху */
    margin-bottom: 1em; /* Отступ снизу */
   }
  </style>
 </head>
 <body>
  <p>Солнце яркое светило, <br>
  Ветер выдался попутный - <br>
  Путешественникам выпал <br>
  Путь приятный и нетрудный. <br>
  Вдруг вдали корабль пиратов <br>
  Показался с длинным флагом; <br>
  Был таран на нем поставлен, <br>
  Приготовленный к атакам.</p>  
  <p>Завывая громко в трубы, <br>
  Шли грабители навстречу, <br>
  Грозным голосом кричали, <br>
  Вызывая всех на сечу. <br>
  Корабельщики в испуге <br>
  Побелели, точно мел. <br>
  Только витязь был спокоен, <br>
  Только он не оробел.</p>
 </body>
</html>

Результат примера показан ни рис. 1.

Рис. 1. Расстояние между абзацами текста

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

htmlbook.ru

Отступ текста в html – «Как делать отступы в HTML?» – Яндекс.Знатоки

Как сделать отступ текста в html — Seoblog

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

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

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

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

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

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

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

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

Внутренние отступы блоков

Внешние отступы блоков

Абзацы в HTML

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

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

Установка отступов за счет вставки пробелов

Применение тега цитирования

Альтернативные варианты

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

Как в HTML сделать отступ текста – инструкция к применению

Установка отступов за счет вставки пробелов

Применение тега цитирования

Альтернативные варианты

отступы | htmlbook.ru

О сайте

Основные разделы

HTML

CSS

Сайт

Отступ в HTML — Баламут Чума — LiveJournal

Отступ первой строки (свойство text-indent)

`text-indent`

Что такое `text-indent` CSS

Красная строка в HTML: как сделать отступ первой строки абзаца

Запретить наследование `text-indent`

Отодвигать только текст красной строки абзаца

Как изменить расстояние между абзацами текста?

Задача

Решение

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

Как сделать отступ текста в html — Seoblog

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

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

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

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

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

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

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

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

Внутренние отступы блоков

Внешние отступы блоков

Абзацы в HTML

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

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

Установка отступов за счет вставки пробелов

Применение тега цитирования

Альтернативные варианты

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

Как в HTML сделать отступ текста – инструкция к применению

Установка отступов за счет вставки пробелов

Применение тега цитирования

Альтернативные варианты

отступы | htmlbook.ru

О сайте

Основные разделы

HTML

CSS

Сайт

Отступ в HTML — Баламут Чума — LiveJournal

Отступ первой строки (свойство text-indent)

text-indent

Что такое text-indent CSS

Красная строка в HTML: как сделать отступ первой строки абзаца

Запретить наследование text-indent

Отодвигать только текст красной строки абзаца

Как изменить расстояние между абзацами текста?

Задача

Решение

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

`text-indent`

Что такое `text-indent` CSS

Запретить наследование `text-indent`