Содержание

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

Здравствуйте, дорогие друзья!

Рассмотрим несколько способов как сделать отступ текста в HTML.

Навигация по статье:

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

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

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

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

<div style=”margin-left:20px;”> Текст блока HTML </div>

<div style=”margin-left:20px;”> Текст блока HTML </div>

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

HTML:

<div> Текст блока </div>

<div> Текст блока </div>

CSS:

.text-block { margin-left:20px; }

.text-block {

margin-left:20px;

}

Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:
«Как определить ID и класс элемента на странице?»

При помощи этого свойства мы можем задать разные отступы тексту в 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 и другие единицы.

Обратите внимание, если вы задаёте верхний или нижний отступ для тега <a>, <span>, <b> — то, скорее всего, он не сработает. Это связано с тем что верхний и нижний margin работает только для блочных элементов HTML, а указанные выше теги являются строчными. Для решения проблемы можно дополнительно задать этому тегу CSS свойство display:inline-block; чтобы к нему применялись свойства одновременно блочного и строчного элемента HTML.

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

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

<div style=”paddint-top:20px;”> Текст блока </div>

<div style=”paddint-top:20px;”> Текст блока </div>

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

CSS:

.text-block { padding: 20px 10px 15px 20px; }

.text-block {

padding: 20px 10px 15px 20px;

}

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

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

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

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

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

HTML:

<p>Задаём &nbsp; в HTML</p>

<p>Задаём &nbsp; в  HTML</p>

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

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

HTML:

<div> Здесь текст HTML блока</div>

<div> Здесь текст HTML блока</div>

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

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

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


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

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

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

Абзац, абзацный отступ (красная строка)

Абзацы

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

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

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

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

Примечание: по умолчанию расстояние между абзацами равно 1em (em — это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.

Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.

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

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


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

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

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

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

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

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


<html>
  <head>
    <style>
	  p { text-indent: 25px; }
	</style>
  <head>
  <body>

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

  </body>
</html>
Попробовать »

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


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

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

С этой темой смотрят:

Отступ текста в CSS, красная строка. Форматирование текста

Отступ текста

Отступ в первой строке абзаца, имитирующий красную строку, — это один из самых распространенных эффектов для текста. В CSS для указания отступа предназначено свойство text-indent.

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

p { text-indent: 30px; }

Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p {
        text-indent: -40px;
		padding-left: 40px;
      }
    </style>
  </head>

  <body>
    <p>У этого абзаца первая строка будет выступать над остальными на 40px, для просмотра
	выхода строки за границу элемента и ее усечение вследствии этого, просто удалите строку
	CSS-кода добавляющую внутренний отступ к абзацу (padding-left: 40px;).</p>
  </body>
</html>
Попробовать »

Примечание: свойство padding-left было приведено только для примера, как можно выйти из неприятной ситуации. На данный момент на нем можно не заострять внимание. Внутренние отступы и свойство padding-left подробно разбираются в главе — Блочная модель.

С text-indent могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 { text-indent: 25px; }
      .test2 { text-indent: 50%; }
    </style>
  </head>

  <body>
    <p>Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом
	в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px.</p>
    <p>Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом
	в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%.</p>
  </body>
</html>
Попробовать »

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 { text-indent: 15%; }
    </style>
  </head>

  <body>
    <div>
	  Первая строка текста элемента div будет иметь отступ равный 15% ширины его
	  родительского элемента или ширины окна браузера.
      <p>Первая строка текста элемента p будет иметь отступ, который был унаследован
	  от его родительского элемента.</p>
	</div>
  </body>
</html>
Попробовать »

Форматирование

Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 {
        text-transform: uppercase; 
        text-decoration: overline;
      }
      p.class2 {
        text-transform: lowercase;
        text-decoration: line-through;
      }
      p.class3 {
        text-transform: capitalize;
        text-decoration: underline;
      }
    </style>
  </head>

  <body>
    <p>Первый абзац.</p>
    <p>Второй абзац.</p>
    <p>Третий абзац.</p>
    <p>Расстояние между символами в тексте изменено
    с помощью свойства letter-spacing.</p>
  </body>
</html>
Попробовать »

С этой темой смотрят:

seodon.ru | Примеры HTML и CSS

Опубликовано: 12.05.2011 Последняя правка: 16.12.2015

Как убрать отступы HTML-элемента, которые браузеры устанавливают по умолчанию? Подобный вопрос часто возникает у начинающих верстальщиков, которые хотят убрать подобные отступы у таких элементов, как <UL>, HTML-таблицы (тег <TABLE>) и их ячейки и т.д. На самом деле нет ничего проще, но сначала давайте разберемся, а отступы ли вы имеете в виду, когда ищете ответ на этот вопрос?

В CSS есть два типа свойств, которые отвечают за отступы (CSS padding) и поля (CSS margin) элементов. Их расположение показано на следующем изображении:

Так вот, когда многие новички говорят о том, что хотят убрать у элемента отступы, то на самом деле они имеют в виду его поля, так как именно их обычно добавляют браузеры к некоторым элементам. Нет, отступы, конечно, тоже добавляются, но таких элементов очень мало, например, у тегов <INPUT> и <BUTTON> браузеры устанавливают ненулевые отступы, чтобы текст на кнопках не прилегал к рамке вплотную.

Немного иначе обстоит дело у HTML-таблиц, так как у них есть еще два параметра — это свойство CSS border-spacing, изменяющее расстояние между границами или рамками ячеек (которое тоже можно назвать отступами) и CSS border-collapse, которое вообще убирает это расстояние и делает границы общими. На изображении ниже показано размещение всех этих полей и отступов у таблицы.

На что здесь надо обратить внимание. Ну, во-первых, для ячеек таблиц не существует полей в обычном понимании, вместо них используется border-spacing, во-вторых, у тега <TABLE> имеются и поля, и отступы, как у обычного HTML-элемента. Ну и, в-третьих, отступ от внутреннего края таблицы до ячеек складывается из размера внутреннего отступа таблицы, к которому прибавляется размер расстояния между ячейками.

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

Как убрать отступы по краям HTML-страницы

Пример HTML и CSS: убираем отступы у тега BODY

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Убираем отступы по краям страницы</title>
  <style type="text/css">
   body {
    margin: 0; /* убираем поля тега BODY */
   }
   p {
    margin: 0; /* убираем поля параграфов */
   }
  </style>
 </head>
 <body>
  <p>Содержимое страницы.</p>
 </body>
</html>

Результат примера

Описание примера

Как вы уже поняли, у тега <BODY> браузеры устанавливают не отступы, а внешние поля, которые мы и убрали. Заодно были убраны поля у параграфа, чтобы хорошо было видно, как текст прилегает к самому краю HTML-страницы.

Как убрать отступы у HTML-тегов UL и LI

Пример HTML и CSS: убираем отступы у списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Убираем отступы у тегов UL и LI</title>
  <style type="text/css">
   body {
    margin: 0;
   }
   ul, li {
    list-style: none; /* убираем маркеры списка */
    padding: 0; /* убираем отступы у Ul и LI */
    margin: 0; /* убираем поля */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Ниф-Ниф</li>
   <li>Нуф-Нуф</li>
   <li>Наф-Наф</li>
  </ul>
 </body>
</html>

Результат примера

Описание примера

Для визуального оформления списков, все популярные браузеры устанавливают поля и отступы у тега <UL>, причем поля они ставят только сверху и снизу (как у параграфов), а внутренний отступ только слева, чтобы отодвинуть вправо элементы списка. Однако для надежности поля и отступы были убраны и у тега <LI>, на тот случай, если какой-то браузер решит вести себя не так, как все. Кстати подобный подход называется сбросом CSS, можете почитать.

Как убрать отступы у таблицы

Пример HTML и CSS: убираем отступы между ячейками таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Убираем отступы у HTML-таблицы</title>
  <style type="text/css">
   body {
    margin: 0;
   }
   table {
    border: 5px #000 solid; /* рамка вокруг таблиц */
   }
   td {
    border: 2px #000 solid; /* рамка вокруг ячеек */
   }
   #table2 {
    border-collapse: collapse; /* делаем у второй таблицы общие границы ячеек */
   }
   #table3 {
    border-spacing: 0; /* у третьей таблицы обнуляем расстояние между ячейками */
   }
  </style>
 </head>
 <body>
 
  <div>Первая таблица</div>
  <table>
   <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td></tr>
   <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td></tr>
  </table>
  
  <div>Вторая таблица</div>
  <table>
   <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td></tr>
   <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td></tr>
  </table>
  
  <div>Третья таблица</div>
  <table>
   <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td></tr>
   <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td></tr>
  </table>
  
 </body>
</html>

Результат примера

Описание примера

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

Ко второй таблице было применено свойство CSS border-collapse:collapse, чтобы границы у соседних ячеек стали общими. А вот в третьей — расстояние между ячейками было просто обнулено, но их границы (рамки) остались на своих местах, это очень хорошо видно по характерному утолщению рамок. Естественно на самом деле никакого утолщения не произошло, просто рамки в таблице «прильнули» друг к другу.

В общем, как видите, оба этих способа помогают убрать отступы в таблице, просто делают это немного по-разному.

Отступ в HTML — EasyDoit.ru

Теги, определяющие абзац, пробел, HTML блок и параграф

Рассмотрим в деталях HTML блоки и параграфы как элементы интернет-страницы.

  • HTML параграф определяется тегами <p> </p>.
  • HTML параграфы обыкновенно содержат текст, форматирующие теги, изображения.
  • HTML параграф не может содержать внутри себя блочные элементы, такие как заголовки
    <h2> – </h6>, блок <div> </div> и другие параграфы.
  • HTML блок определяется тегами <div> </div>.
  • HTML блок может вмещать в себя любые элементы web-страницы, в любом количестве.
  • HTML блоки прекрасно подходят для верстки интернет-страниц, ими легко манипулировать.

Содержание страницы

  • Определяем параграфы и HTML блоки с помощью тегов
  • HTML пробелы из таблицы специальных символов
  • Способы отобразить HTML абзацы или отступы строки

Рассмотрим расположенный ниже код:

<html>
<head>
<title>HTML параграфы и блоки</title>
</head>
<body>
<p>Первая строка</p>
<p>Вторая строка</p>
<div>Третья строка</div>
<div>Четвертая строка</div>
<div><p>Пятая строка</p></div>
<div>Шестая строка</div>
</body>
</html>

Результат:

Посмотреть в новом окне HTML блоки и параграфы

Нам видно, что HTML параграфы имеют отступы по вертикали – такова особенность тегов <p> </p>. HTML блоки <div> </div> такие пространства не создают, потому что они не несут никакой нагрузки, а просто являются контейнерами.

Tеги <p> </p> не могут содержать другие <p> </p> или <div> </div>. Внутри <p> </p> могут быть размещены линейные элементы, такие как <span> </span> или, например, теги, отвечающие за форматирование текста.

Теги <p> </p> и <P> </P>, в принципе, одно и то же, но W3C консорциумом рекомендовано использовать маленькие буквы. В новой версии HTML как и в современном XHTML использование больших букв при написании тегов запрещено.

Блок <div> </div> может содержать внутри себя сколько угодно <div> </div> и <p> </p> и других элементов HTML документа. Он идеально подходит для верстки, но об этом позже – в уроках CSS самоучителя.

HTML пробел из таблицы специальных символов

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

Что касается пробелов между словами, то сколько бы не было их в Блокноте, то есть в исходном коде, на web-странице отобразится только один. Если вам понадобится увеличить растояние – используйте символ пробела &nbsp; из таблицы символов. Вы спросите: Зачем нужны эти закодированные значения обычных символов? – Я отвечу: Они нужны, чтобы отображать, например, такие скобки < >. Другими словами, для вывода на экран тегов <p> </p>, в своем редакторе я пишу: <code>&lt;p&gt; &lt;/p&gt;</code>. Теги <code> </code>, как мы помним, преобразуют текст в моноширинный (машинописный).

Способы отображения HTML абзаца

Примеры вывода абзаца:

<html>
<title>Абзац в HTML</title>
</head>
<body>
<p><blockquote>Отступ слева с использованием тегов.</blockquote></p>
<p>Отступ слева с использованием CSS атрибута.</p>
</body>

Результат:

Посмотреть в новом окне: HTML абзац

В первом случае абзац выводится тегами <blockquote> </blockquote>, а во втором случае — с помощью CSS атрибута text-indent и его значения, которое устанавливается в пикселях и может иметь любую величину, что бывает очень удобно.

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

ab-w.net

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

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

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

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

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

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

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

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

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

sozdavaite-sait.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> HTML отступ текста, работает стиль CSS - text-indent </p>

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

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

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

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

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

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

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

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

balamut4uma.livejournal.com

Добрый день уважаемые читатели. Сегодня короткая заметка о том как сделать красную строку для каждого абзаца на html — странице. Если кто не знает, то красная строка это отступ первой строки в блоке текста. Такой отступ в абзацах можно встретить практически в любом печатном тексте, но при создании веб-сайтов оформление красной строки встречается довольно редко, несмотря на то, что она позволяет гораздо удобнее воспринимать текст. На случай если вдруг заказчик потребует, чтобы абзацы на его сайте начинались с красной строки, то привожу для вас простой рецепт решения этой задачи.

Решить задачу можно многими способами, например можно в начале каждого абзаца вставлять подряд несколько специальных символов &nbsp;, но это может занять достаточно большое количество времени. Поэтому я рекомендую для создания красной строки использовать свойство CSS <strong>text-indent</strong>, которое задает отступ первой строки блока текста. При этом никакого воздействия на остальные строки не производиться.

Свойство text-indent имеет простой синтаксис:

text-indent: <значение> | <проценты> | inherit

В качестве значений можно указывать пиксели (px), пункты (pt) другие единицы принятые в CSS. Значение определяет на сколько сдвинуть текст первой строки в право от исходного положения. Допустимо указывать отрицательные значения, тогда текст сдвинется влево. При указании процентных значений, отступ первой строки вычисляется в зависимости от ширины блока текста.

Теперь к примерам. Для разделения абзацев в html обычно используют тег <p>. Тогда, чтобы в каждый абзац на странице начинался с красной строки достаточно добавить код css:

<style>
p {
text-indent: 25px; /* Отступ первой строки в пикселах */
}
</style>

Например:

<html>
   <head>
     <meta charset=»utf-8″>
     <title>Красная строка</title>
     <style>
       p {
         text-indent: 25px; /* Отступ первой строки в пикселах */
       }
     </style>
   </head>
   <body>
     <p>На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.
     </p>
     <p>
Этот дуб как будто говорил: «Весна, и любовь, и счастье! И как не надоест вам все один и тот же глупый, бессмысленный обман! Все одно и то же, и все обман! Нет ни весны, ни солнца, ни счастья. Вон смотрите, сидят задавленные мертвые ели, всегда одинокие, и вон я растопырил свои обломанные, ободранные пальцы, выросшие из спины, из боков — где попало. Как выросли — так и стою, и не верю вашим надеждам и обманам».
     </p>
     <p>
Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
     </p>
   </body>
</html>

Результат:

Посмотреть в браузере

Если красную строку необходимо добавить только в один абзац, то можно сделать так:

<p style=»text-indent: 5%»>На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.</p>

Результат:

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

Либо к абзацам, которые должны начинаться с красной строки добавляем атрибут class и добавляем нужный стиль:

<style>
   p.indent {
     text-indent: 25px;
   }
</style>
<p class=»indent»>
 Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
</p>

Результат:

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

Теперь вы запросто сможете сделать красную строку на своих html страницах. До новых встреч!

webcodius.ru

Поля и отступы: в чём разница?

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

  • поле задаётся свойством padding, отступ – margin;
  • поле определяется промежутком между содержимым и границей блока, отступ – между границами соседних блоков;
  • поля могут как учитываться в размерах элемента (ширине и высоте), так и нет.

Свойство margin

Итак, чтобы задать горизонтальный или вертикальный отступ текста CSS, используют конструкцию margin. Данное свойство применяется к тегу <p></p> задающего абзац документа. В самом простом случае оно записывается как:

margin: 12px.

Такая строчка означает, что вокруг блока текста (или любого другого блока) со всех сторон будет сделан отступ в 12 пикселей. Чтобы увеличить промежуток, например, в три раза, достаточно записать:

margin: 36px.

Но что делать, если интервал между блоками должен быть разный с каждой стороны? Разработчики веб-страниц используют несколько форм записи:

  1. margin: 11px 22px.
  2. margin: 11px 22px 33px.
  3. margin: 11px 22px 33px 44px.

В первом примере от нижней и верхней границ блока будут сделаны отступы по 11 пикселей, по бокам блока – по 22 пикселя. Согласно второй форме записи, между верхним краем блока и контентом будет 11 пикселей, между нижним – 33 пикселя, по бокам – по 22 пикселя. В третьем случае отступ текста CSS будет иметь значение 11 пикселей сверху, 22 пикселя справа, 33 пикселя снизу и 44 пикселя слева.

Также доступна возможность записи расстояния до границы блока только с одной стороны: margin-top, margin-bottom, margin-left, margin-right. Переведя названия свойств на русский язык, несложно догадаться об их назначении. Например, следующая запись говорит о том, что отступ справа будет равен 22 пикселя:

margin-right: 22рх.

Для остальных сторон расстояния вокруг блока принимаются равными значению элемента-родителя.

Свойство margin имеет особенность, которую должен помнить разработчик, когда использует отступ текста CSS по вертикали. Интервалы соседних элементов не суммируются, а налагаются друг на друга. Например, пусть один из блоков имеет margin-bottom: 15px, а примыкающий к нему снизу блок margin-top: 35px. Школьная арифметика и здравый смысл подсказывают, что общий отступ между ними будет 50 пикселей. На практике это не так. Блок с большим значением свойства margin «поглотит» своего соседа. В итоге интервал между элементами будет 35 пикселей.

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

Оформляя документ в текстовом редакторе, пользователи предпочитают задавать каждый новый абзац с помощью «красной» строки. С помощью CSS отступ текста слева несложно сделать – используется конструкция text-indent. Записывается она так:

text-indent: 11px.

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

text-indent: 11px;

text-align: justify.

Помимо пикселей, при описании разметки допускается использование других единиц – дюймов, пунктов, процентов. Пусть блок имеет отступ текста CSS, равный 10%. При ширине блока, равной 500 пикселям, красная строка будет составлять 50 пикселей (10% от 500).

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

text-indent: inherit.

Удивительно, но абзацный отступ может принимать и отрицательные значения! В этом случае формируются так называемые выступы, то есть основной текст остаётся на месте, а первая строка смещается влево на 22 пикселя:

text-indent: -22px.

Чтобы буквы не перешли за левую границу браузера, дополнительно к text-indent нужно использовать конструкцию для задания поля:

padding-left: 22px.

Полезные рекомендации

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

  • красная строка и отступ текста – разные понятия, и для их указания используются разные свойства;
  • для вертикальных отступов правила математики не действуют – интервалы накладываются, «побеждает» элемент с большим значением;
  • отрицательный абзацный отступ используют, чтобы указать первую строку абзаца с помощью изображения.

fb.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

Можно достичь тех же результатов используя стиль, встроенный в 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

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

Рассмотрим, как в 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

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

Добрый день уважаемые читатели. Сегодня короткая заметка о том как сделать красную строку для каждого абзаца на html — странице. Если кто не знает, то красная строка это отступ первой строки в блоке текста. Такой отступ в абзацах можно встретить практически в любом печатном тексте, но при создании веб-сайтов оформление красной строки встречается довольно редко, несмотря на то, что она позволяет гораздо удобнее воспринимать текст. На случай если вдруг заказчик потребует, чтобы абзацы на его сайте начинались с красной строки, то привожу для вас простой рецепт решения этой задачи.

Решить задачу можно многими способами, например можно в начале каждого абзаца вставлять подряд несколько специальных символов &nbsp;, но это может занять достаточно большое количество времени. Поэтому я рекомендую для создания красной строки использовать свойство CSS <strong>text-indent</strong>, которое задает отступ первой строки блока текста. При этом никакого воздействия на остальные строки не производиться.

Свойство text-indent имеет простой синтаксис:

text-indent: <значение> | <проценты> | inherit

В качестве значений можно указывать пиксели (px), пункты (pt) другие единицы принятые в CSS. Значение определяет на сколько сдвинуть текст первой строки в право от исходного положения. Допустимо указывать отрицательные значения, тогда текст сдвинется влево. При указании процентных значений, отступ первой строки вычисляется в зависимости от ширины блока текста.

Теперь к примерам. Для разделения абзацев в html обычно используют тег <p>. Тогда, чтобы в каждый абзац на странице начинался с красной строки достаточно добавить код css:

<style>
p {
text-indent: 25px; /* Отступ первой строки в пикселах */
}
</style>

Например:

<html>
   <head>
     <meta charset=»utf-8″>
     <title>Красная строка</title>
     <style>
       p {
         text-indent: 25px; /* Отступ первой строки в пикселах */
       }
     </style>
   </head>
   <body>
     <p>На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.
     </p>
     <p>
Этот дуб как будто говорил: «Весна, и любовь, и счастье! И как не надоест вам все один и тот же глупый, бессмысленный обман! Все одно и то же, и все обман! Нет ни весны, ни солнца, ни счастья. Вон смотрите, сидят задавленные мертвые ели, всегда одинокие, и вон я растопырил свои обломанные, ободранные пальцы, выросшие из спины, из боков — где попало. Как выросли — так и стою, и не верю вашим надеждам и обманам».
     </p>
     <p>
Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
     </p>
   </body>
</html>

Результат:

Посмотреть в браузере

Если красную строку необходимо добавить только в один абзац, то можно сделать так:

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

Результат:

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

Либо к абзацам, которые должны начинаться с красной строки добавляем атрибут class и добавляем нужный стиль:

<style>
   p.indent {
     text-indent: 25px;
   }
</style>
<p>
 Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
</p>

Результат:

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

Теперь вы запросто сможете сделать красную строку на своих html страницах. До новых встреч!

Как сделать (задать) отступ текста и изображения в html (сверху, снизу, справа, слева)

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

Чтобы наша страничка, а точнее ее содержимое не прилипало к границам сайта, существуют два типа отступов. Это:

Вкратце расскажу про эти два атрибута CSS.

Атрибут margin позволяет сделать отступ целых блоков с содержимым. Ведь мы верстаем наши сайты с помощью div верстки, соответственно, наш сайт представляет собой совокупность различных блоков (так называемых «строительных кирпичей»), которые мы будем перемещать так как нам нужно. Мы можем перемещать блоки вправо, влево, а также вверх и вниз. У margin есть следующие свойства

  • Margin-right — (позволяет делать отступ блоков и элементов html страницы справа)
  • Margin-left — (делает html отступ слева)
  • Margin-bottom — (снизу)
  • Margin-top (сверху)

Вот пример

Отступ между картинками margin теперь стал 150px

Вот код для вставки:

<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Отступы в html документе</title> </head> <body> <div><img src=»img/car.jpg» alt=»машина»/></div> <div><img src=»img/car1.jpg» alt=»еще одна машина» /></div> </body> </html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Отступы в html документе</title>

</head>

<body>

<div><img src=»img/car.jpg» alt=»машина»/></div>

<div><img src=»img/car1.jpg» alt=»еще одна машина» /></div>

</body>

</html>

Как сделать отступ html текста с помощью атрибута padding

Атрибут padding  дает возможность тексту и любому другому контенту перемещаться свободно внутри блока. Вот как это показано на рисунке

Здесь мы видим что между картинкой и текстом сделан отступ в 30px.

Вот исходники кода для вставки:

<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Отступы в html документе</title> </head> <body> <div><img src=»img/car.jpg» 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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Отступы в html документе</title>

</head>

<body>

<div><img src=»img/car.jpg» 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>

Также как и margin, padding имеет свои свойства. Они следующие:

  • Padding-right (отступ внутри справа)
  • Padding-left (html отступ слева)
  • Padding-top (сверху)
  • Padding-bottom (снизу)

Также если вам нужно только в одном месте применить, допустим отступ строки, то это можно сделать с помощью самого простого способа – добавить перед текстом html код пробела. Выглядит он следующим образом —  &nbsp

Все эти способы рабочие и используются часто. Просто запомните если вы хотите отступить внутри блока, то используете padding, если хотите «двигать» блоки на странице, то margin вам в помощь

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

Смотрите внимательно этот видеоурок и просто повторяйте за мной.

 

[sociallocker id=»3259″]

Скачать исходники

[/sociallocker]

 

Как сделать отступ в тексте HTML с помощью CSS?

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

Существует два распространенных подхода к отступу текста:

Подход 1: Использование свойства margin-left : Это свойство используется для добавления поля слева от элемента.Его можно использовать для добавления необходимого отступа, указав необходимое пространство в подходящих единицах длины или процентах.

Пример: В этом примере свойство margin-left используется для отступа всего блока текста.



HTML

902 Вывод:

Подход 2: Использование свойства text-indent: Это свойство используется для установки количества пробелов перед первой строкой текста в абзаце.Он может быть указан в единицах длины или в процентах по мере необходимости.

Пример: В этом примере первая строка абзаца имеет отступ с использованием свойства text-indent.

HTML

< html >

< голова 000

style >

p {

margin-left: 40px;

}

стиль >

головка >

< корпус 7>

< h3 > Добро пожаловать в GFG h3 >

< p >

Мы предлагаем широкий выбор услуги

для вас, чтобы учиться, процветать, а также

получайте удовольствие! Бесплатные уроки, миллионы

статей, в прямом эфире, в Интернете и

Аудиторные курсы, частое программирование

Соревнования, вебинары по отраслям

Эксперты, возможности стажировки

и возможности трудоустройства.

p >

корпус >

html >

9902 Вывод:


Форматирование и отступы вашего HTML

Зачем делать отступ в коде?

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

Неправильный метод 1. Все в одной строке

  

Lorem ipsum dolor sit amet, consctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Concequat.

Проблемы:

  • Трудно понять, где заканчивается код и начинается текст / контент
  • Трудно увидеть, где находится

    , даже с включенной накруткой

Неправильный метод 2: 3 строки, но без отступа

  

Lorem ipsum dolor sit amet, consctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, упражнения quis nostrud ullamco labouris nisi ut aliquip ex ea Commodo Concequat.

ИЛИ

  

H. П. Лавкрафт

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

Лучший метод: отступ текста / содержимого

  

Lorem ipsum dolor sit amet, consctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud осуществление ullamco labouris nisi ut aliquip ex ea Commodo Concequat.

Преимущества:

  • Начало (

    ) и конец (

    ) находятся на одном уровне, поэтому легко увидеть, что вы закрыли код, а также увидеть, где код начинается и заканчивается
  • Легко различить код и текст / контент

Примеры отступов кода

Вот несколько примеров того, как WebSanity любит делать отступы в нашем коде.

Блочные элементы

  

Lorem ipsum.

  

Lorem ipsum
Долор сит амет

  <цитата>
    

Lorem ipsum dolor sit amet, consctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Примечание. Обратите внимание на то, что текст / контент имеет отступ внутри

, а затем

с отступом внутри

.Это называется вложением . Видите, как легко определить, что от чего дитя?

  <таблица>
    

< html >

< голова >

style >

p {

text-indent: 40px;

}

стиль >

головка >

< корпус 7>

< h3 > Добро пожаловать в GFG h3 >

< p >

Мы предлагаем широкий выбор услуги

для вас, чтобы учиться, процветать, а также

получайте удовольствие! Бесплатные уроки, миллионы

статей, в прямом эфире, в Интернете и

Аудиторные курсы, частое программирование

Соревнования, вебинары по отраслям

Эксперты, возможности стажировки

и возможности трудоустройства.

p >

корпус >

html >

Lorem ipsum dolor sit amet Consectetur adipisicing
Lorem ipsum dolor sit amet Consectetur adipisicing

Примечание: снова с несколькими уровнями отступов - но должно быть очевидно, насколько это помогает при чтении этого кода!

Исключения

   

Заголовок страницы

Примечание. Мы не делаем отступ для

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

  Название документа 
  

Примечание. Опять же, мы не делаем отступы </code> и большинства других элементов внутри <head>, потому что они короткие. </p> </blockquote> <pre> <code> <ul> <li> Лорем </li> <li> Ипсум </li> <li> Долор </li> </ul> </code> </pre> <blockquote> <p> Примечание. Мы не делаем отступ <code> <li> </code>, потому что в большинстве случаев содержимое короткое, потому что нас больше беспокоит <code> <ul> </code> & <code> </ul> </code>, и потому что он действительно может удлинить общий код.Тем не менее, если вы хотите сделать отступ <code> <li> </code>, не стесняйтесь. </p> </blockquote> <h3><span class="ez-toc-section" id="i-27"> Встроенные элементы </span></h3> <p> Вы никогда не делаете отступы для встроенных элементов. Относитесь к ним как к тексту / содержанию. Примеры: </p> <pre> <code> <p> Lorem ipsum <strong> dolor sit amet </strong>, conctetur adipisicing elit, sed do <em> eiusmod tempor </em> incididunt ut labore et <code> dolore magna aliqua </code>. Ut enim ad minim veniam, <font size = "5"> quis nostrud </font> упражнение ullamco <a href = "http: // www.demonoid.me "> лаборис nisi ut aliquip </a> ex ea Commodo Concequat. </p> </code> </pre> <pre> <code> <цитата> <p> Lorem ipsum dolor sit amet, <a href="http://www.avclub.com"> conctetur adipisicing elit </a>, sed do <strong> eiusmod tempor </strong> incididunt ut labore et <em> dolore </em> magna aliqua. </p> </blockquote> </code> </pre> <h3><span class="ez-toc-section" id="i-28"> А как насчет базовой структуры веб-страницы? </span></h3> <p> Посмотрите на следующий код.Вы могли бы подумать, что <code> <head> </code> & <code> <body> </code> будут иметь отступ внутри <code> <html> </code> - в конце концов, они являются дочерними по отношению к <code> <head> </code>, так что не должны ли они быть с отступом? </p> <pre> <code> <html> <head> <title> Название документа

Заголовок страницы

Lorem ipsum dolor sit amet, consctetur adipisicing elit, sed do eiusmod tempor incididunt

Так почему же и не имеют отступа? Пара причин:

  • Вы знаете, что и являются потомками ; на самом деле они всегда только дочерние элементы , поэтому нет необходимости напоминать себе об этом через вложение
  • Вы экономите один уровень на отступе; когда вы начинаете встраивать HTML в HTML внутри HTML внутри HTML, это может добавить

Ваш текстовый редактор должен упростить создание отступов для кода

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

Автоотступ

BBEdit, например, имеет параметр в настройках для «Автоотступ», который он определяет следующим образом: «Когда этот параметр выбран, нажатие клавиши Return в новых окнах автоматически вставляет пробелы или табуляторы для отступа новой строки от на том же уровне, что и в предыдущей строке ".

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

Пробелы или табуляции? (Пробелы!)

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

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

  • BBEdit : Настройки> Настройки редактора по умолчанию> Автоматически раскрывать вкладки
  • Komodo Edit : Параметры / Настройки> Редактор> Отступ> Предпочитать символы табуляции вместо пробелов
  • Блокнот ++ : «Настройки»> «Языковое меню / Настройки вкладок»> «Заменить пробелом»

Примечание. Если кто-нибудь знает, что я должен добавить, дайте мне знать.

Сколько мест?

Следующий вопрос: сколько пробелов вставляется при нажатии TAB? Обычно люди выбирают 2, 4 или 8 пробелов. По мнению WebSanity, 8 - это слишком много, 4 приемлемо, но слишком велико, а 2 - в самый раз. С 2 вы можете видеть отступы, но большое количество вложений не выталкивает ваш код до нелепых длин, как вы можете видеть в следующем:

Ваш текстовый редактор должен позволять вам выбирать, сколько пробелов будет вставлено при нажатии клавиши TAB.Различные текстовые редакторы устанавливают это по-разному. Вот несколько примеров:

  • BBEdit : Настройки> Настройки редактора по умолчанию> Ширина вкладки
  • Komodo Edit : Параметры / Настройки> Редактор> Отступ> Количество пробелов на отступ
  • Notepad ++ : Настройки> Языковое меню / Настройки вкладок> Размер вкладки

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

Одновременный отступ для нескольких строк

Что делать, если вы хотите сделать отступ более чем в одной строке кода? Как 5? Или 25? Вы можете вручную переместить курсор в начало каждой строки и нажимать TAB необходимое количество раз, но это быстро станет утомительным.

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

Вот как различные текстовые редакторы позволяют делать отступ строк в группе:

  • BBEdit : Выделите строки и нажмите TAB.Для отступа линий нажмите Shift-TAB.
  • Komodo Edit : Выделите строки и нажмите TAB. Для отступа линий нажмите Shift-TAB.
  • Блокнот ++ : выделите строки и нажмите TAB. Для отступа линий нажмите Shift-TAB.

Создание выступов с помощью HTML и CSS

Несмотря на то, что мнения о роли выступов в цифровую эпоху после печати расходятся, время от времени вам может потребоваться добавить выступы для таких вещей, как ссылки APA, в материалы вашего онлайн-курса.К сожалению, редакторы WYSIWYG («Что видишь, то и получаешь») во многих системах управления обучением не дают вам возможности добавлять выступающие отступы, кроме как путем создания их вручную в HTML и / или CSS.

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

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

Пример выступа

Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat.Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.

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

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

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

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

HTML для ссылок APA с выступами

Отображается в браузере как:

Армбрехт, Том.(2018). Преодоление препятствий (текста): создание привлекательных страниц с контентом. ObjectLessons . Получено с https://object-lessons.com/getting-over-stumbling-blocks-of-text-creating-engaging-content-pages/

Фрулинг, Закари Р. (2018). Основы HTML для учебных дизайнеров. ObjectLessons . Получено с https://object-lessons.com/html-basics-for-instructional-designers/

.

Армбрехт, Том.(2018). Преодоление препятствий (текста): создание привлекательных страниц с контентом. Уроки по объектам . Получено с https://object-lessons.com/getting-over-stumbling-blocks-of-text-creating-engaging-content-pages/

.

Фрулинг, Захари Р. (2018). Основы HTML для учебных дизайнеров. Уроки по объектам . Получено с https://object-lessons.com/html-basics-for-instructional-designers/

.

В этом примере начальный тег

содержит следующую информацию о стиле в качестве атрибутов:

Значение атрибута стиля «padding-left: 36px» увеличивает отступ всего абзаца на 36 пикселей.А значение атрибута стиля «text-indent: -36px» сдвигает первую строку абзаца влево на 36 пикселей (отсюда отрицательное значение -36px). Вы можете легко изменить степень отступа, изменив значения этих двух чисел.

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

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

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

Для добавления выступов к абзацам или ссылкам APA с помощью HTML и CSS можно использовать следующие шаги:

Шаг 1: Добавьте новый класс (например, «apa-reference») к тегам начала абзаца для всех элементов, для которых потребуется выступающий отступ, как показано в следующем примере.

Теги абзаца с классом apa-reference

Армбрехт, Том.(2018). Преодоление препятствий (текста): создание привлекательных страниц с контентом. ObjectLessons . Получено с https://object-lessons.com/getting-over-stumbling-blocks-of-text-creating-engaging-content-pages/

Фрулинг, Захари Р. (2018). Основы HTML для учебных дизайнеров. ObjectLessons . Получено с https://object-lessons.com/html-basics-for-instructional-designers/

Шаг 2: Добавьте блок стиля для класса «apa-reference» в CSS для вашего содержимого и добавьте атрибуты стиля для выступающего отступа, как показано ниже.

CSS для класса «apa-reference» со стилем для выступающего отступа

.apa-reference {
padding-left: 36px
text-indent: -36px
}

В этом фрагменте кода CSS говорится, что любой элемент HTML, попадающий в класс «apa-reference», должен иметь висящий отступ: весь абзац будет сдвинут вправо на 36 пикселей, но первая строка будет сдвинута назад влево на 36 пикселей.(Точка перед «apa-reference» указывает, что этот блок CSS относится к классу , называемому «apa-reference», а не к тегу .)

Преимущество совместного метода HTML / CSS для добавления выступов заключается в том, что один и тот же стиль может применяться к нескольким тегам с классом «apa-reference» и может быть изменен глобально в одном месте без дальнейшего изменения HTML. для конкретных абзацев или ссылок на сноски. Однако недостатком этого метода является то, что у вас должно быть достаточно возможностей для работы с CSS, чтобы иметь возможность находить, где находится информация CSS для вашего контента, и иметь возможность изменять ее, добавляя соответствующую информацию о стилях, показанную выше.

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

Вы также можете прочитать

Теги: ссылки APA, CSS, избранные, сноски, выступающие отступы, HTML, HTML-теги, учебный дизайн

Как сделать отступ для текста в HTML-документах

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

Свойство text-indent принимает числовое значение в единицах CSS ( пикселей , em , rem )

Синтаксис следующий:

  text-indent: 15px; || 1.5em; || 1,5 бэр
  

Теперь давайте попробуем применить отступ к тегам HTML

и

. Я собираюсь сделать отступ 50px , чтобы его было легче заметить:

  
Привет мир! Это div, использующий класс indent.Первая строка отступ на определенное количество пикселей, но не на остальную часть div линии.

Теперь это абзац с классом отступа. Как видите, первая Строка имеет отступ, как и в классе div. text-indent свойство работает с большинством элементов HTML

Результат будет следующим. Отступ отмечен красными полосами:

CSS text indent results

Свойство text-indent следует за значением свойства direction , поэтому, если у вас есть текст с направлением справа налево, просто добавьте направление свойство для ваших HTML-элементов:

  

Теперь давайте посмотрим, как сделать отступ для всего абзаца, а не только для первой строки.

CSS-отступ для всего абзаца

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

Следующий документ HTML:

  
Привет мир! Это абзац с использованием класса indent.
Первая строка имеет отступ на определенное количество пикселей.
Но не остальные строки абзаца.

Будет выдан следующий результат:

Отступ текста только для первого абзаца, даже с жестким разрывом

Чтобы решить эту проблему, существует экспериментальная спецификация CSS для свойства text-indent с именем каждая строка , которая предположительно имеет отступ для каждой строка абзаца разделена тегами
.

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

Когда вам нужно сделать отступ для всего абзаца, а не только для первого, вам нужно использовать свойство padding-left (или padding-right , если у вас есть направление текста справа налево)

Для Например, давайте создадим новый селектор классов CSS с именем indent-all , к которому применен стиль padding-left: 50px :

  

Привет мир! Это абзац с использованием класса indent. Первая строка отступ на определенное количество пикселей, но не на остальную часть абзаца линии.

Привет мир! Это абзац с использованием класса indent.
Первая строка имеет отступ на определенное количество пикселей.
Но не остальные строки абзаца.

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

HTML-код, приведенный выше, выдаст следующий результат:

CSS-отступ для всего абзаца с использованием заполнения

Теперь, если у вас есть направление текста справа налево, вам нужно использовать padding-right вместо padding-left .

Следующее правило CSS должно использоваться для направления справа налево:

  .rtl {
  направление: RTL;
}
.indent-all-right {
  отступ справа: 50 пикселей;
}
  

Теперь вам просто нужно добавить оба класса выше в тег HTML с направлением справа налево, в котором вы хотите сделать отступ.

Статьи по теме:

Как сделать отступ в HTML? (Простое руководство)

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

Отступы с использованием HTML

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

Этот текст с отступом.

Выше пример, когда весь текст в теге абзаца имеет отступ 40 пикселей слева. Остальные теги абзацев не имеют отступа.

Этот текст с отступом.

Пример выше видно, что только первая строка абзаца имеет отступ 40 пикселей слева.

Что такое CSS?

Каскадный Таблицы стилей (CSS) - это язык определений, который мы используем, когда хотим визуализировать веб-сайты визуально.

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

Эти будут быть между вашими HTML-тегами .

Пример мы приводим ниже создает класс стиля под названием «вкладка», который позволяет абзац и текст должны иметь отступ на 40 пикселей слева.

<стиль type = «text / css»>

.tab {маржа слева: 40 пикселей; }

->

Введите код выше в разделе , затем добавьте его в свой абзац (

) и используйте его так, как мы показали.

Пример вкладки

Как ты можешь см. выше, когда вы добавляете CSS в свой HTML-документ, он называется «Встроенный» CSS. Это очень просто, если вы хотите быстро внести изменения, но непросто изменить в долгосрочной перспективе.

Также, вместо этого возьмите весь свой код CSS и поместите его в отдельный файл с расширением .css.

Ссылка на файл CSS

Если хотите чтобы создать ссылку на этот файл позже, вы можете использовать любой HTML-документ, и этот HTML-код документ также может использовать эти свойства CSS. Чтобы избежать трудностей при изменив CSS позже, вы должны использовать отдельный файл CSS.

Ссылка на другой файл CSS, добавьте следующую строку в элемент (после тег и перед тегом ) в документе HTML.

<ссылка rel = «таблица стилей» Type = «text / css» href = «Http://www.example.com/basic.css»>

После создав этот файл .css, отредактируйте его, и вы добавите тот же код CSS, что и мы show, исключая теги