Html отступ слева: Как изменить отступ слева от маркеров списка?

Содержание

margin-left — внешний отступ слева

Поддержка браузерами


12.0+	6.0+	1.0+	1.0+	3.5+	1.0+

Описание

CSS свойство margin-left устанавливает внешний отступ слева элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента либо до границы элемента, расположенного слева от него. Обратите внимание, для строчных элементов (display: inline;) могут быть установлены только внешние отступы с левой и с правой стороны.

Размер внешнего левого отступа можно указывать в пикселях (px), процентах (%) или в других единицах измерения CSS.

Значение может быть как положительным, так и отрицательным.

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

Значение по умолчанию:	0
Применяется:	ко всем элементам, за исключением элементов, которые относятся к типу display: table-*, кроме table-caption, table и inline-table.
Анимируется:	да
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.marginLeft=»10px»

Синтаксис

margin-left: величина|auto|inherit;

Значения свойства

Значение	Описание
auto	При использовании значения auto, браузер сдвигает элемент полностью в правую сторону. Если обоим свойствам (margin-left и margin-right) установить значение auto, элемент будет центрирован по горизонтали. Данное значение применяется только к блочным элементам, которые имеют фиксированную ширину.
величина	Указывает размер поля в единицах измерения, используемых в CSS.
%	Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

div#myBox {
background-color: red;
margin-left: auto;
}

Параметры отступов. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов.

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

Стандарт CSS предлагает средства для создания отступов двух видов.

1. Отступ между воображаемой границей элемента Web-страницы и его содержимым — внутренний отступ. Такой отступ принадлежит данному элементу Web-страницы, находится внутри его.

2. Отступ между воображаемой границей данного элемента Web-страницы и воображаемыми границами соседних элементов Web-страницы — внешний отступ. Такой отступ не принадлежит данному элементу Web-страницы, находится вне его.

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

— Внутренний отступ — это отступ между границей ячейки и содержащимся в ней текстом.

— Внешний отступ — это отступ между границами отдельных ячеек таблицы. Атрибуты стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента Web-страницы:

Мы можем указать в качестве величины отступа абсолютное или относительное значение. Значение auto задает величину отступа по умолчанию, обычно оно равно нулю.

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

Листинг 11.1

TD, TH { padding-left: 2px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px }

А вот стиль, создающий внутренние отступы, равные двум сантиметрам слева и справа:

indented { padding-left: 2cm; padding-right: 2cm }

Мы можем привязать такой стиль к абзацу и посмотреть, что получится.

Атрибут стиля padding позволяет сразу указать величины внутренних отступов со всех сторон элемента Web-страницы:

padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

— Если указано одно значение, оно задаст величину отступа со всех сторон эле- мента Web-страницы.

— Если указаны два значения, первое установит величину отступа сверху и снизу, а второе — слева и справа.

— Если указаны три значения, первое определит величину отступа сверху, второе — слева и справа, а третье — снизу.

— Если указаны четыре значения, первое задаст величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.

Пример:

TD, TH { padding: 2px }

indented { padding: 0cm 2cm 0cm 2cm }

Здесь мы просто переписали определения приведенных ранее стилей с использованием атрибута стиля padding.

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

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

Пример:

h2 { margin-top: 5mm }

Этот стиль создаст у всех заголовков первого уровня отступ сверху 5 мм.

В качестве значений внешних отступов допустимы отрицательные величины:

UL { margin-left: -20px }

В этом случае Web-обозреватель создаст «отрицательный» отступ. Такой прием позволяет убрать отступы, создаваемые Web-обозревателем по умолчанию, например, отступы слева у больших цитат и списков.

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

margin: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Этот атрибут стиля ведет себя так же, как его «коллега» padding.

Пример:

h2 { margin: 5mm 0mm }

Однако мы не можем использовать атрибуты стиля margin-left, margin-top, margin- right, margin-bottom и margin для задания внешних отступов у ячеек таблиц (т. е. расстояния между ячейками) — они просто не будут действовать. Вместо этого следует применить атрибут стиля border-spacing:

border-spacing: <отступ 1> [<отступ 2>]

Отступы могут быть заданы только в виде абсолютных значений.

— Если указано одно значение, оно задаст величину отступа со всех сторон ячейки таблицы.

— Если указаны два значения, первое задаст величину отступа слева и справа, а второе — сверху и снизу.

Атрибут стиля применяется только к таблицам (тегу <TABLE>):

TABLE { border-spacing: 1px }

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

ВНИМАНИЕ!

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

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

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

margin, padding | lesson-web.ru

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

Первые два свойства, которые мы изучим – это «margin» и «padding». Сначала давайте напишем любимый наш бокс и зададим ему какие-нибудь свойства. Сделаем ширину 100 px, высоту 100px и background давайте «tomato». И получается вот такой вот у нас квадратик.

Теперь с помощью «margin’а» мы можем перемещать этот квадратик, куда нам только захочется. Для этого пишем «margin» и задаем значение свойства 50px.

.box{
  width:100px;
  height:100px;
  background: tomato;
  margin:50px;
}

Теперь прямоугольник переместился на 50px слева и сверху, то есть свойство «margin» задаёт вокруг этого блока отступы в размере 50px. Тут, в силу некоторых особенностей, справа тоже появляется такой вот большой «margin», но мы потом ещё поговорим, почему такое происходит.

Так же мы можем задавать «margin’ы» с определенной стороны. Допустим, только сверху.

.box{
  width:100px;
  height:100px;
  background: tomato;
  margin-top:50px;
}

Видите, слева отступа нет, есть только сверху. Либо только слева, соответственно, не буду показывать, объяснять. «Margin-left» — отступ слева, «margin-right» — отступ справа и «margin-bottom» — отступ снизу.

Так же вы можете задавать эти значения с помощью только одного «margin’а». Для этого нужно указать четыре параметра. Они по очереди задают значения сверху, справа, снизу и слева.

.box{
  margin: 0px 0px 0px 0px;
}

То есть мы берем по часовой стрелке сверху и пошли: первая цифра задаёт отступ сверху, вторая – справа, снизу и слева. Давайте, я задам разные значения.

.box{
  margin: 50px 20px 30px 70px;
}

Дальше мы можем сделать следующую фишечку – указать значение «auto».

.box{
  margin: 50px auto;
}

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

То есть, если мы указываем сверху какое-то значение, и справа какое-то значение «auto», то блок можно выровнять таким образом по центру. Если мы задаём в таком формате:

.box{
  margin: 50px auto 50px auto;
}

То у нас будут отступы сверху и снизу по 50px.

К сожалению, по вертикали таким образом выравнивать нельзя((((

Дальше перейдём к параметру «padding».

«Padding» точно такой же параметр, как и «margin», только отступ изнутри. Соответственно, делаем отступ 50px.

.box{
  width:100px;
  height:100px;
  background: tomato;
  margin-top:50px;
  padding: 50px;
}

Блок увеличивается в размере. А всё почему? Потому что у него есть внутри «padding’и», то есть берется размер самого блока и «padding».

Кстати, пользуясь подсказочкой от Chrome, мы можем понять, что размер блока формируется из его ширины-высоты, из его «padding’а», «border’а», которого у нас сейчас нет, и «margin’ов».

«Padding’и» точно так же, как и «margin’ы» можно задавать с помощью «top», «right», «left», «bottom» и так далее. То есть сейчас бокс у нас сейчас 100 на 100 и сврех отступ 50px внутренний. Так же можно задавать отступы одним «padding’ом» через четыре цифры, то есть разные отступы будут с разных сторон.

И напоследок хочу сказать, что «padding» обязательно увеличивает в размере наш блок, то есть это в принципе сейчас было понятно, но я всё равно хочу уточнить. То есть если сам блок у нас 100 на 100px и у нас «padding’и» по 20, то физический размер блока будет 140 на 140, а не 100 на 100, потому что 20 с каждой стороны добавляется 20 на 2 – 40, 40 плюс 100 равно 140. То ест вот такая вот математика очень простая. Я думаю, всё понято.

На этом всё. Поехали дальше двигать наши блоки и разбираться, что с ними вообще можно делать.

Отступ в 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-странице отобразится только один. Если вам понадобится увеличить растояние – используйте символ пробела   из таблицы символов. Вы спросите: Зачем нужны эти закодированные значения обычных символов? – Я отвечу: Они нужны, чтобы отображать, например, такие скобки < >. Другими словами, для вывода на экран тегов <p> </p>, в своем редакторе я пишу: <code><p> </p></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 код пробела —   Добавить html код пробела можно в любом html редакторе.

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

<html> <head> <title>HTML отступ текста</title> </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

Източник.

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

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

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

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

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

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

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

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

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

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

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

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

Например:

<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 и добавляем нужный стиль:

Результат:

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

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

webcodius.ru

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

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

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

Свойство margin

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

margin: 12px.

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

margin: 36px.

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

margin: 11px 22px.
margin: 11px 22px 33px.
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

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

CSS Padding — Отступ. Уроки для начинающих. W3Schools на русском

Этот элемент имеет внутренний отступ 70px.

Попробуйте сами »

CSS Padding — Внутренний отступ

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

Благодаря CSS у вас есть полный контроль над отступом. Есть свойства для установки отступов для каждой стороны элемента (вверху, справа, внизу и слева).

Padding — Отдельные стороны

CSS имеет свойства для указания отступа для каждой стороны элемента:

padding-top
padding-right
padding-bottom
padding-left

Все свойства padding могут иметь следующие значения:

length — указывает отступ в пикселях, pt, см и т.д.
% — указывает отступ в % от ширины содержащего элемента
inherit — указывает, что отступ должен быть унаследован от родительского элемента

Примечание: Отрицательные значения не допускаются!

Пример

Установите разные отступы для всех четырех сторон элемента <div>

div {
padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Попробуйте сами »

Padding — Сокращенное свойство

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

Свойство padding — это сокращенное свойство для следующих индивидуальных свойств отступа:

padding-top
padding-right
padding-bottom
padding-left

Т.о., вот как это работает:

Если свойство padding имеет четыре значения:

padding: 25px 50px 75px 100px;
- верхний отступ 25px
- правый отступ 50px
- нижний отступ 75px
- левый отступ 100px

Пример

Используйте сокращенное свойство padding с четырьмя значениями:

div {
padding: 25px 50px 75px 100px;
}

Попробуйте сами »

Если свойство padding имеет три значения:

padding: 25px 50px 75px;
- верхний отступ 25px
- правый и левый отступы 50px
- нижний отступ 75px

Пример

Используйте сокращенное свойство padding с тремя значениями:

div {
padding: 25px 50px 75px;
}

Попробуйте сами »

Если свойство padding имеет два значения:

padding: 25px 50px;
- верхний и нижний отступы 25px
- правый и левый отступы 50px

Пример

Используйте сокращенное свойство padding с двумя значениями:

div {
padding: 25px 50px;
}

Попробуйте сами »

Если свойство padding имеет одно значение:

padding: 25px;
- все четыре отступа 25px

Пример

Используйте сокращенное свойство padding с одним значением:

div {
padding: 25px;
}

Попробуйте сами »

Padding и Width

CSS свойство width определяет ширину области содержимого элемента. Область содержимого — это часть внутри отступа, границы и поля элемента (блочная модель).

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

Пример

Здесь элемент <div> имеет ширину 300 пикселей. Однако фактическая ширина элемента <div> будет 350 пикселей (300 пикселей + 25 пикселей слева + 25 пикселей справа):

div {
width: 300px;
padding: 25px;
}

Попробуйте сами »

Чтобы сохранить ширину 300 пикселей, независимо от количества отступов, вы можете использовать свойство box-sizing. Это заставляет элемент сохранять свою ширину; если вы увеличите отступ, доступное пространство содержимого уменьшится.

Пример

Используйте свойство box-sizing, чтобы ширина оставалась равной 300 пикселей, независимо от количества отступов:

div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

Попробуйте сами »

Больше примеров

Установите левый отступ
Этот пример демонстрирует, как установить левый отступ элемента <p>.

Установите правый отступ
Этот пример демонстрирует, как установить правый отступ элемента <p>.

Установите верхний отступ
Этот пример демонстрирует, как установить верхний отступ элемента <p>.

Установите нижний отступ
Этот пример демонстрирует, как установить нижний отступ элемента <p>.

Проверьте себя с помощью упражнений!

Все CSS свойства отступа

Свойство	Описание
padding	Сокращенное свойство для установки всех свойств отступа в одном объявлении
padding-bottom	Устанавливает нижний отступ элемента
padding-left	Устанавливает левый отступ элемента
padding-right	Устанавливает правый отступ элемента
padding-top	Устанавливает верхний отступ элемента

Отступы в CSS (margin и padding)

В этой статье пойдёт речь о двух CSS свойствах: margin и padding. Оба они задают отступ. Но в одном случае это внешний отступ от других элементов, а во втором — внутренний отступ от содержимого. Эти свойства являются одними из наиболее часто используемых при создании сайтов. Разберём каждое по отдельности.

Внешний отступ (margin)

Для демонстрации отступа нам потребуется два блока div. Создадим их:

<div>
   <div></div>
</div>

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

 
Как видно из примера, рамки совпадают, потому что нет отступов. Теперь сделаем внешний отступ в 10px для внутреннего, красного, элемента так:
<div>
   <div></div>
</div>
На странице браузера получится такой результат: 
Существует возможность задать отступ для каждой стороны отдельно. Для этого используйте свойства: 
margin-left — отступ слева
margin-right — отступ справа
margin-top — отступ сверху
margin-bottom — отступ снизу

Аналогично это можно сделать через свойство margin, передав ему сразу четыре значения. К примеру так: «margin: 10px 20px 30px 40px«. В таком случае отступы будут: сверху — 10px, справа — 20px, снизу — 30px, сверху — 40px. попробуем это на практике: 
<div>
   <div></div>
</div>
Получится такой результат: 
Как и с другими универсальными свойствами, которым можно передавать сразу 4 значения для 4 сторон (или углов), свойству margin можно передать 2 значения. К примеру так: «margin: 10px 20px«. Тогда верхний и нижний отступ будут равны 10px, а правый и левый будут равны 20px. А если передать 3 значения «margin: 10px 20px 30px«, то соответственно верхний отступ получится 10px, правый и левый — 20px, а нижний 20px.
Свойство margin может принимать ещё и значние «auto«. Это значение центрирует элемент по горизонтали.
С помощью значения auto у margin можно центрировать только блочные элементы. Для строчных используйте text-align: center.
Попробуем продемонстрировать эту центровку:
<div>
   <div></div>
</div>
В результате внутренний элемент будет иметь отступ сверху и снизу в 10px и находиться по центру родительского: 
Этот приём центрирования используется практически на всех сайтах, на которых контент расположен в центре экрана.
Внутренний отступ (padding)
Внутренний отступ можно сделать через CSS свойство padding. Оно принимает значения аналогично свойству margin. Можно указать от одного до четырёх значений, чтобы задать разные отступы для разных сторон. Для демонстрации результатов работы этого свойства используем текст с выравниванием во всю ширину контейнера (text-align: justify;) 
<div>
   Тише, мыши, кот на крыше,
   а котята ещё выше.
   Кот пошёл за молоком,
   а котята кувырком.
   Кот пришёл без молока,
   а котята ха-ха-ха. 
</div>
Результат будет таким:Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
 Существует возможность задать отступ для каждой стороны отдельно. Для этого используйте свойства:padding-left — отступ слева
padding-right — отступ справа
padding-top — отступ сверху
padding-bottom — отступ снизу

Проблема расширения (box-sizing)
 У свойства padding существует проблема. Это свойство расширяет элемент на величину отступа. Для наглядности создадим два одинаковых по ширине элемента «width: 200px;«, но у одного установим свойство padding:<div>
   Без отступа
</div>
<div>
   С отступом
</div>
В браузере получится такой результат:Без отступа
С отступом
Оба элемента имеют одинаковую ширину «width: 200px;«. Но нижний на 60 пикселей шире из-за того, что слева и справа есть отступ padding (по 30 px каждый), который расширяет этот элемент. 
Чтобы такого не происходило, необходимо задать элементу свойство box-sizing в значении border-box (по умолчанию оно в значении content-box):<div>
   Без отступа
</div>
<div>
   С отступом
</div>
Тогда вместо того, чтобы раздвигать границы элемента, будет сужаться область внутри него.Без отступа
С отступом
Расширение элементов из-за внутреннего отступа padding иногда сильно мешает. Особенно при создании мобильных версий сайтов. Из-за них чаще всего на мобильных устройствах появляется горизонтальная прокрутка. Поэтому заранее убедитесь, что поставили свойство box-sizing в значение border-box для самых больших элементов на странице .
Margins внешние отступы CSS уроки для начинающих академия
 
 Этот элемент имеет поле 70px.
Поля CSS
Свойства CSS margin используются для создания пространства вокруг элементов вне любых определенных границ.
С помощью CSS вы имеете полный контроль над полями. Существуют свойства для настройки поля для каждой стороны элемента (сверху, справа, снизу и слева).
Маржа-отдельные стороны
CSS имеет свойства для указания поля для каждой стороны элемента:
margin-top
margin-right
margin-bottom
margin-left
Все свойства полей могут иметь следующие значения:
Auto-обозреватель вычисляет маржу
length — определяет поле в пикселах, PT, cm и т. д.
% — задает поле в% от ширины содержащего элемента
Наследование-указывает, что поле должно быть унаследовано от родительского элемента
Совет: Допустимы отрицательные значения.
В следующем примере устанавливаются различные поля для всех четырех сторон элемента <p>:
Пример
 p {
   
margin-top: 100px;
   
margin-bottom: 100px;
   
margin-right: 150px;
   
margin-left: 80px;
}
Маржа-Сокращенное свойство
Чтобы сократить код, можно указать все свойства полей в одном свойстве.
Свойство margin является сокращенным свойством для следующих свойств отдельных полей:
margin-top
margin-right
margin-bottom
margin-left
Итак, вот как это работает:
Если свойство margin имеет четыре значения:
margin: 25px 50px 75px 100px; top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
Пример
 p {
   
margin: 25px 50px 75px 100px;
}
Если свойство margin имеет три значения:
margin: 25px 50px 75px;top margin is 25px
right and left margins are 50px
bottom margin is 75px
Пример
 p {
   
margin: 25px 50px 75px;
}
Если свойство margin имеет два значения:
margin: 25px 50px;top and bottom margins are 25px
right and left margins are 50px
Пример
 p {
   
margin: 25px 50px;
}
Если свойство margin имеет одно значение:
margin: 25px;all four margins are 25px
Пример
 p {
   
margin: 25px;
}
Значение Auto
Можно задать для свойства Margin значение auto для горизонтального центрирования элемента в его контейнере.
Затем элемент будет занимать заданную ширину, а оставшееся пространство будет равномерно распределено между левым и правым полями:
Пример
 div {
    width: 300px;
    margin:
auto;
    border: 1px solid red;
}
Наследуемое значение
В этом примере левое поле элемента <p class = «EX1»> наследуется от родительского элемента (<div>):
Пример
 div {
    border: 1px solid red;
   
margin-left: 100px;
}p.ex1 {
    margin-left:
inherit;
}
Свернуть маржи
Верхние и нижние поля элементов иногда сворачиваются в одно поле, равное самому большому из двух полей.
Это не происходит на левом и правом полях! Только верхние и нижние поля!
Посмотрите на следующий пример:
Пример
 h2 {
    margin: 0 0 50px 0;
}h3 {
   
margin: 20px 0 0 0;
}
В приведенном выше примере элемент <h2> имеет нижнее поле 50px, а элемент <h3> имеет верхний предел, установленный в 20px.
Здравый смысл, казалось бы предположить, что вертикальное поле между <h2> и <h3> будет в общей сложности 70px (50px + 20px). Но из-за краха маржи, фактические маржа заканчивается время 50px.
Все свойства полей CSS
Свойство Описание
margin Сокращенное свойство для задания свойств полей в одном объявлении
margin-bottom Устанавливает нижнее поле элемента
margin-left Задает левое поле элемента
margin-right Задает правое поле элемента
margin-top Задание верхнего поля элемента

 Форматирование и отступы в вашем 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, conctetur 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, conctetur adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua.
    
  
 Примечание. Обратите внимание на то, что текст / контент имеет отступ внутри 
 , а затем 
  с отступом внутри 
 .Это называется  вложением . Видите, как легко определить, что от чего дитя?
  <таблица>
    
        
            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-41"> Встроенные элементы </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-42"> А как насчет базовой структуры веб-страницы? </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, conctetur 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 
  Проблема 
 «Как сделать отступ в HTML?» 
 Я вижу, что этот вопрос довольно часто задают на различных форумах, которые я часто посещаю.Вероятно, вопрос должен быть таким: 
 «Как сделать  надежно отступом  в
 HTML? «
 Ответ не такой, как хотелось бы большинству авторов. Естественное поведение
 HTML в наиболее распространенных браузерах — это сворачивание нескольких пробелов в HTML-коде.
 контент в единое пространство. Как же тогда автор может сделать надежный отступ? У ВСЕХ методов, доступных для создания контента, есть потенциальные недостатки.
 который не выровнен по левому краю относительно области просмотра (обычное значение по умолчанию в
 браузеры.) Ни одно из решений не будет работать во ВСЕХ браузерах, поэтому вы должны
 решите, какой метод будет работать лучше всего с учетом возможностей вашего ожидаемого
 читаемость и взвешивание потенциальной потери удобочитаемости для некоторых пользователей.
  Примечание:  Джим
 Барчук создал отличную страницу по этой теме, которую вы можете
 хочу проверить под названием «Глупый
 Уловки с отступом HTML ». Он посвящен исследованию актуальных левых
 размеры / значения полей и отступов, используемые различными браузерами (в том числе
 исследовал на этих страницах.)
  Возможные решения 
  Что:  & nbsp;
 или & # 160;
  Поддержка  (& # 160;):
 [ IE1  |   M1   |  N1  |  O2.1  |  S1 ]
  Поддержка  (& nbsp;):
 [ IE2  |   M2A8   |  N1.1  |  O2.1  |  S1 ]
  Как: 
 Браузеры обычно обрабатывают несколько последовательных пробелов и / или символов возврата каретки как
 единое пространство.В случае неразрывных пробелов (& nbsp; или & # 160;)
 браузеры обычно учитывают несколько последовательных вхождений как есть без
 сворачивая в единое пространство. 
  Плюсы: 
 Обычно работает в большинстве браузеров
 Никаких HTML-структур не требуется для достижения отступа
 Практически ВСЕ браузеры понимают & # 160;
 Автор может грубо изменить размер отступа, используя желаемое количество
 несколько & nbsp; (или & # 160;) сущности.
  Минусы: 
 Работает только для одной строки отступа — при переносе возвращается
 на предыдущий уровень отступа.
 Не ВСЕ браузеры отображают несколько & nbsp; происшествий как есть.
 Некоторые браузеры сворачивают это до одного пробела.
 Некоторые старые браузеры не поддерживают & nbsp; названный объект
 Автор не может гарантировать точный размер отступа (в зависимости от шрифта
 размер, платформа и разрешение просмотра, размер пространства может варьироваться.)
  Что:         Поддержка: 
         [ IE1  |   M1   |  N1  |  O2.1  |  S1 ]
      
  Как: 
          
 
   Тег PRE сохраняет ВСЕ пробелы, возврат каретки и перевод строки
             «как есть» из исходного исходного кода HTML. Предустановленный макет
             таким образом может быть создан.
   Плюсы: 
          
    Большинство ВСЕ браузеров поддерживают эту функцию, даже текстовые браузеры.
              
  Может управлять отступом для нескольких строк текста.
              
  Поддерживается в HTML 2.0 — его поддерживают старые браузеры.
              
 
 
   Минусы: 
          
    При форматировании PRE к тексту обычно применяется шрифт фиксированной ширины.
                 для достижения желаемого фиксированного внешнего вида.
  Разрыв строк всегда сохраняется (может быть нежелательным побочным эффектом.)
              
  PRE — это структура форматирования блока, и всегда вставляется перенос строки
                 до и после конструкции. Размер интервала перед и
                 после того, как блокировка не может быть гарантирована от браузера к браузеру.
            
 
 
 
      
    Что: 
          <Цитата>
      
  Поддержка: 
         [ IE1  |   M1   |  N1  |  O2.1  |  S1 ]
      
  Как: 
          
    Большинство браузеров отображают содержимое отрывка BLOCKQUOTE с отступом.
      
   Плюсы: 
          
    Обычно может вкладывать BLOCKQUOTE для создания более глубоких отступов.
              
  Большинство браузеров используют отступ в структурах BLOCKQUOTE.
              
  Разметка поддерживается в HTML 2.0 — ее поддерживают старые браузеры.
              
 
 
   Минусы: 
          
    Некоторые браузеры безоговорочно применяют курсив к BLOCKQUOTE
                 структуры, а также отступ.
  Автор не может контролировать размер отступа.
              
  BLOCKQUOTE — это структура форматирования блока, и разрыв строки всегда
                 вставлены до и после конструкции. Размер интервала
                 до и после блокировки не может быть гарантирована от браузера к браузеру.
              
  Маркировка кода с помощью BLOCKQUOTE на самом деле не означает «сделать мне отступ»;
                 Определения HTML НЕ ТРЕБУЮТ, чтобы браузер использовал отступ для BLOCKQUOTE.
                 конструкции…это просто указывает, что контент (или  ДОЛЖЕН 
                 быть) цитата.
              
 
 
 
      
    Что: 
         <Пробел>
      
  Поддержка: 
         [IE | M |    N3B5-6.2    | O | S]
      
  Как: 
          
    Netscape создал тег специально для управления
             пробел в HTML-документе. Автор может создавать только горизонтальные,
             только по вертикали или блокировать пробелы с помощью этого тега.
   Плюсы: 
          
    Предоставляет на уровне пикселей управление размером желаемого интервала.
              
  Тег специально создан для управления желаемым отступом
                 свойство.
              
  Этот метод также позволяет создавать плавающие элементы интервала.
              
 
 
   Минусы: 
          
    Специфический тег Netscape поддерживается только в некоторых версиях, поэтому он
                 ОЧЕНЬ ограниченная поддержка.Также в настоящее время его нет ни в одном HTML.
                 стандартным, и никогда не будет (больше контроля возможно с
                 Таблицы стилей сейчас.)
              
  В структуре SPACER нет ничего обратно совместимого с
                 допускать постепенную деградацию в не поддерживающих браузерах.
              
  Этот элемент больше не поддерживается в текущих версиях Netscape.
              
 
 
 
      
    Что:  
        Поддержка: 
         [ IE1  |   M1   |  N1  |  O2.1  |  S1 ]
      
  Как: 
          
 
   Термин DD в списке определений обычно имеет отступ в большинстве браузеров.
      
   Плюсы: 
          
    Большинство браузеров выделяют термины DD в структурах DL.
              
  Поддерживается в HTML 2.0 — старые браузеры будут поддерживать его.
              
 
 
   Минусы: 
          
    Некоторые браузеры МОГУТ размещать термин DD в той же строке, что и
                 предыдущий срок DT.
  Спецификации HTML рекомендуют, чтобы термин DD не существовал.
                 без связанного с ним термина DT, но это почти никогда не требуется
                 в браузерах.
              
  Размер отступа статичен и не может быть изменен — Internet Explorer
                 Размер отступа примерно вдвое меньше размера отступа в Netscape и Mosaic.
              
  Маркировка кода с помощью DL на самом деле не означает «сделай мне отступ»;
                 Определения HTML НЕ ТРЕБУЮТ, чтобы браузер делал отступ для термина DD в
                 структура списка определений…это просто указывает на то, что контент
                 (или  СЛЕДУЕТ  быть) связанным объяснением определяющего термина.
              
 
 
 
      
    Что:  ,
         
        Поддержка: 
         [ IE1  |   M1   |  N1  |  O2.1  |  S1 ]
      
  Как: 
          
 
   Можно использовать список, содержащий структуру, без
             необходимые элементы списка (LI) для достижения отступа в нескольких браузерах.
   Плюсы: 
          
    Internet Explorer, Mosaic, Netscape и Opera имеют отступы
                 поведение с этим HTML.
              
 
 
   Минусы: 
          
    Строго говоря, этот HTML недействителен по отношению к установленным
                 стандарты. Всякий раз, когда вы используете недопустимый HTML, конечный результат НЕ может быть
                 гарантировано. Этот метод не следует использовать.
 [Примечание: можно утверждать, что
                 используя только структуру списка, такую как элемент заголовка списка (LH)
                 существующий только в черновике HTML 3.0 с истекшим сроком действия, будет экземпляром, где
                 такое поведение может сойти с рук … тем не менее, синтаксис вроде LH
                 устаревшая разметка и не рекомендуется.]
              
 
 
 
      
    Что:  
      
  Поддержка: 
         [ IE1  |   M1   |  N1  |  O2.1  |  S1 ]
      
  Как: 
          
    Использование прозрачного изображения желаемой ширины отступа или
             используя небольшой (1 X 1 пиксель, будет достаточно, чтобы сохранить время загрузки
             минимальное) прозрачное изображение с явным размером ширины позволяет
             определение желаемой области белого пространства.
      
   Плюсы: 
          
    Позволяет контролировать отступы на уровне пикселей.
              
  Этот метод также позволяет создавать плавающие элементы интервала.
  При использовании атрибута ALT может произойти значительная деградация — браузеры часто
                 сохранить несколько пробелов в его отображении.
              
  Большинство графических браузеров поддерживают вставку изображений.
              
 
 
   Минусы: 
          
    Текстовые браузеры не смогут отображать желаемую графику
                 отступ.
              
  Атрибут ALT тега изображения может сбрасывать несколько последовательных
                 пробелы к одному.
  Дополнительный запрос загрузки и время, необходимое для загрузки изображения.
              
  Отступает только одна строка текста, если не более поздняя
                 используются теги / атрибуты (таблицы или плавающие атрибуты IMG ALIGN.)
              
  Браузеры, которые поддерживают изображения, но не поддерживают  прозрачный 
                 изображения могут отображать цветное изображение в запрошенном пространстве отступа.
              
 
 
 
      
    Что:  Таблицы
      
  Поддержка: 
         [ IE2  |   M2A8   |  N1.1  |  O2.1  |  S1 ]
      
  Как: 
          
    Использование первого столбца таблицы или первой ячейки строки для
             отступ управления может быть довольно успешным. Многие методы могут быть
             используется для определения размера этого первого столбца: прозрачные изображения или неразрывные
             пробелы в содержимом ячейки или явные объявления атрибута WIDTH
             для определений ячеек.
      
   Плюсы: 
          
    Может управлять первой строкой или целыми блоками текста.
  Позволяет управлять размером отступа на уровне пикселей.
              
  С помощью таблиц возможно появление сложных отступов
                 (Атрибуты COLSPAN и ROWSPAN позволяют еще больше
                 возможности отображения.)
              
  Методы внутри ячейки, используемые для создания отступов (прозрачные изображения
                 и неразрывные пробелы) ухудшаются в браузерах, которые не
                 разбираться в таблицах.
              
  Почти все браузеры теперь поддерживают таблицы
              
 
 
   Минусы: 
          
     Исторически  таблицы не всегда поддерживались.Очень
                 старые браузеры вряд ли их поддерживают.
              
  Браузеры, не поддерживающие вложенные таблицы, могут не отображать вложенные таблицы
                 содержание хорошо.
              
  Использование механизмов структурирования таблиц для управления размером отступа
                 (например, атрибуты WIDTH) плохо работают в браузерах, которые
                 не понимаю таблиц.
              
  Для создания структур таблиц требуется больше HTML-тегов — это может вызвать
                 более длительное время загрузки в отличие от некоторых других методов создания отступов.
  С тех пор, как были созданы таблицы, они использовались для создания интервалов и
                 выравнивания для одного или нескольких текстовых и / или других объектов содержимого.
                 Таблицы должны, строго говоря, представлять  табличных данных. 
                 Ничто в таблице не означает «отступить меня» — это именно то, что
                 многие пользователи и авторы ожидают этого. Авторам не следует полагаться на это.
              
 
 
 
      
    Что:  Каскадный
               Таблицы стилей [-> Index DOT Css]
      
  Поддержка: 
         [  IE3B1   | M |  N4B2  |  O3.5  |  S1 ]
      
  Как: 
          
    Использование свойств полей каскадных таблиц стилей и / или заполнения на
             большинство  ЛЮБОЙ  HTML допускает отступы с любой стороны
             элемент — даже отрицательные значения с полями.
      
   Плюсы: 
          
    Для большинства элементов возможна более высокая степень контроля, чем для
                 любым другим способом.
              
  Информация о рендеринге может быть прикреплена к элементам HTML без
                 потеря исходного смыслового значения (хорошая обратная совместимость.)
            
 
 
   Минусы: 
          
    Старые браузеры никогда не поддерживают каскадные таблицы стилей. Новее
                 браузеры  DO  поддерживают CSS с разной степенью точности.
              
 
 
 
 
  Выводы 
 
 
Из распространенных методов, упомянутых здесь, только некоторые действительно хорошо работают со многими.
браузеры. Главный вопрос, который вы должны задать, когда хотите сделать отступ:
«Ухудшается ли метод в не поддерживающих браузерах?» В
после этого ответ должен быть довольно простым.Чтобы помочь, вот краткое изложение:
     Использование приветствуется  
        Работает нормально в некоторых случаях 
 или в большинстве случаев  
        Использование не рекомендуется  
 
  
            Каскадные таблицы стилей 
           Изображения 
           Столы 
          
 
         Неразрывное расстояние 
           Предварительно отформатированный текст 
           Цитаты 
           Списки определений 
          
 
         РАСПОРНЫЙ элемент 
           Плохие структуры списка 
          
 
 
 
 
  Приложение к личному мнению:  
 Прошло несколько лет с тех пор, как я впервые написал эту страницу, а браузеры давно
Кстати, как это принято в авторской практике.Хотя стандарты всегда хотели
авторов для создания документов, семантически размеченных правильно по отношению к их
содержание, на самом деле это часто не было вариантом.  Но авторы не должны больше игнорировать эти пожелания, если мы хотим создавать или, по крайней мере,
постепенно превратить Интернет в область правильно размеченных документов. Из
рекомендуемые методы для отступов, перечисленные выше, сейчас я действительно могу только рекомендовать
один метод для надежного отступа: CSS. С появлением большей персонализации
дается читателям, различным устройствам рендеринга (например, сотовым телефонам) и
тенденции к тому, чтобы сделать Интернет более доступным для всех читателей и устройств.
глупо пытаться гарантировать отступы…. любой метод, который вы выберете, — это просто «отступ
мне , пожалуйста, . «Есть просто  NO  100% надежный способ отступа … Получить
над ним. =) Откажитесь от попыток создавать страницы с идеальным пикселем и
Поддайтесь мышлению адаптивного рендеринга. 
  
   HTML абзац и отступ первой строки  



  Пункты  

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

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

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

  Абзац 
 
 Примечание: по умолчанию интервал между абзацами равен  1em  (em — единица измерения, равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.
 Не забываем про закрывающий тег 
 Большинство браузеров правильно отображают HTML-документ, даже если вы забыли о закрывающем теге.
 Абзац
 Другой абзац 
 
 Этот код будет работать в большинстве браузеров, но не полагайтесь на него.Забытый закрывающий тег может привести к неожиданным результатам.
 Отступ первой строки 
 Первая строка — это начальная строка абзаца. Чтобы сделать отступ в первой строке абзацев, вам необходимо использовать свойство CSS  text-indent , которое позволяет сделать отступ для первого предложения:


  
    
     Заголовок страницы 
    <стиль>
п {текст-отступ: 25 пикселей; }

  
  

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

  

 
Попытайся » В приведенном выше примере первая строка каждого абзаца на странице начинается с отступа  25 пикселей . В приведенном ниже примере показано, как можно указать отступ только для определенного абзаца на странице:
 Как и в любом настоящем искусстве, в хороших текстах нет мелочей,
 к которой некоторые также относятся и к красной линии, считая, что ее использование не так важно.Однако нужно понимать, что любая запятая несет в себе и эстетику, и
 и смысловая нагрузка, и не только это дань правилам грамматики.
 проблемы и форматирование. 
 
Попытайся » Примечание: нет необходимости устанавливать размер отступа в  25 пикселей , вы можете выбрать оптимальный размер отступа самостоятельно, также используя свойство  text-indent , вы можете сделать его выступающим над остальной текстовой строкой, вы можете необходимо установить отрицательное значение для свойства (например:  -30px ).
 Текст 
 Текст
 Свойства, определенные в следующих разделах, влияют на визуальный
представление символов, пробелов, слов и абзацев.
  ‘text-indent’ 
  Значение:  <длина> | <процент> | наследовать
  Начальный:  0
  Применимо к:  блок-контейнерам
  Унаследовано:  да
  Проценты:  относятся к ширине содержащего блока
  Медиа:  визуальный
  Вычисленное значение:  указанный процент или абсолютная длина
 Это свойство определяет отступ первой строки текста.
в блочном контейнере.Точнее, он определяет отступ
первый блок, который перетекает в блок первой строки блока. Поле с отступом
относительно левого (или правого, для компоновки справа налево) края
строчная коробка. Пользовательские агенты должны отображать этот отступ как пустое пространство.
 ‘Text-indent’ влияет только на строку, если это первая отформатированная строка
элемент. Например, первая строка анонимного блок-бокса — это только
затрагивается, если это первый дочерний элемент своего родительского элемента.
 Значения имеют следующие значения:
 <длина>
 Отступ имеет фиксированную длину.
 <процент>
 Отступ — это процент содержания
ширина блока.
 Значение ‘text-indent’ может быть отрицательным, но
могут быть ограничения, зависящие от реализации.
Если значение ‘text-indent’ отрицательное или
превышает ширину блока, что  первый блок , описанный выше,
может переполнить блок.
Значение «переполнения» повлияет на
виден ли такой текст, который выходит за пределы блока.
 Примеры:
 В следующем примере появляется текстовый отступ «3em».
 
п {текст-отступ: 3em}
  
 Примечание. Поскольку свойство text-indent наследуется, если оно указано в
блочный элемент, это повлияет на дочерние встроенные блочные элементы.
По этой причине часто бывает целесообразно указать ‘ text-indent: 0 ‘.
для элементов, которые указаны ‘ display: inline-block ‘.
  ‘выравнивание текста’ 
  Значение:  осталось | право | центр | оправдать | наследовать
  Начальное:  безымянное значение, которое действует как «влево», если «направление» равно «ltr»,
 ‘right’, если ‘direction’ равно ‘rtl’
  Применимо к:  блок-контейнерам
  Унаследовано:  да
  В процентах:  Н / Д
  Медиа:  визуальный
  Вычисленное значение:  начальное значение или указанное
 Это свойство описывает, как встроенное содержимое блока
контейнер выровнен.Значения
имеют следующие значения:
 слева, справа, по центру, по ширине
 Влево, вправо, по центру и по ширине текста соответственно, как описано в разделе о встроенном форматировании.
 Блок текста — это стопка строк
коробки. В случае «left», «right» и «center» это свойство определяет
как блоки встроенного уровня в каждом строчном блоке выравниваются по отношению к строке
левая и правая стороны коробки; выравнивание не относительно области просмотра. В случае «оправдать»,
это свойство указывает, что блоки инлайн-уровня должны быть заподлицо
с обеих сторон линейного бокса, если возможно, путем расширения или сжатия
содержимое встроенных полей, иначе выровненное как для начального
ценить.(См. Также «межбуквенный интервал» и «межсловный интервал».)
 Если элемент имеет вычисленное значение для ‘пробела’ из ‘pre’ или
‘pre-wrap’, то ни глифы текстового содержимого этого элемента, ни
его пустое пространство может быть изменено с целью оправдания.
 Примечание. CSS может добавить способ выравнивания текста с помощью
‘white-space: pre-wrap’ в будущем.
 Примеры:
 В этом примере обратите внимание, что, поскольку ‘выравнивание текста’ наследуется, все
элементы уровня блока внутри элементов DIV с именем класса ‘important’ будут
иметь их встроенный контент по центру.
 
div.important {выравнивание текста: центр}
  
   Примечание.  Фактический используемый алгоритм согласования зависит от пользовательского агента и языка / сценария.
текста. 
  Соответствующие пользовательские агенты могут
интерпретировать значение «выравнивать по ширине» как «влево» или «вправо», в зависимости от
является ли направление письма элемента по умолчанию слева направо или
справа налево соответственно. 
 16.3.1 Подчеркивание, подчеркивание, выделение и
мигает: «текст-украшение»
недвижимость 
  ‘текст-украшение’ 
  Значение:  нет | [подчеркивание || надстрочный || сквозной || мигать] | наследовать
  Начальный:  нет
  Применимо к:  всем элементам
  Унаследовано:  нет (см. Прозу)
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение:  как указано
 Это свойство описывает добавленные украшения.
к тексту элемента, используя цвет элемента.При указании или распространении на встроенный элемент он
влияет на все блоки, генерируемые этим элементом, и, кроме того,
распространяется на любые входящие в поток блоки уровня блока, которые разделяют встроенный (см.
раздел 9.2.1.1).
Но в CSS 2.1 не определено, будет ли украшение
распространяется в таблицы уровня блока.
Для блок-контейнеров, устанавливающих
встроенное форматирование
контекст, украшения распространяются на анонимный встроенный
элемент, который оборачивает все входящие в поток дочерние элементы блока
контейнер.Для всех остальных элементов он распространяется на любой входящий поток.
дети. Обратите внимание, что текстовые украшения не распространяются на плавающие
и абсолютно позиционированных потомков, ни содержимому атомарных
потомки встроенного уровня, такие как встроенные блоки и встроенные таблицы.
 Подчеркивания, надчеркивания и сквозные линии применяются только к тексту.
(включая пробелы, межбуквенные и межсловные интервалы): поля,
границы и отступы пропускаются.
Пользовательские агенты не должны отображать эти текстовые украшения в содержимом, которое
не текст.Например, нельзя подчеркивать изображения и встроенные блоки.
   Примечание.  Если элемент E имеет обе видимости:
hidden ‘и’ text-decoration: underline ‘, подчеркивание невидимо
(хотя любое украшение родительского элемента E  видно на рисунке ).
Однако CSS 2.1 не определяет, является ли подчеркивание видимым или
невидимый в детях E: 

 
  подчеркнутый или нет?
 

 
  Ожидается, что это будет указано на уровне 3 CSS.
 Свойство text-decoration у дочерних элементов не может иметь никаких
влияние на убранство предка. При определении позиции
длины и толщины линий оформления текста, пользовательские агенты могут учитывать
размеры шрифта и доминирующие базовые линии потомков, но необходимо использовать
одинаковая базовая линия и толщина на каждой линии. Относительное позиционирование
Потомок перемещает все текстовые украшения, влияющие на него, вместе с
текст потомка; не влияет на расчет украшения
начальное положение на этой линии.
 Значения имеют следующие значения:
 нет
 Не выводит текстовое оформление.
 подчеркивание
 Каждая строка текста подчеркнута.
 чертёж
 Каждая строка текста имеет строку над ней.
 сквозной
 Каждая строка текста проходит через линию посередине.
 мигает
 Текст мигает (чередуется между видимым и невидимым).
Соответствующие пользовательские агенты
может просто не мигать текстом. Обратите внимание, что не мигающий текст
это один из способов удовлетворить
КПП 3.3 WAI-UAAG.
 Цвет (а), необходимый для оформления текста, должен быть получен из
значение свойства ‘color’ элемента, на котором ‘text-decoration’
установлен. Цвет украшений должен оставаться прежним, даже если
элементы-потомки имеют разные значения «цвета».
 Некоторые пользовательские агенты реализовали оформление текста с помощью
распространение украшения на дочерние элементы, а не на
сохранение постоянной толщины и положения линии, как описано
над. Возможно, это было разрешено более свободной формулировкой в CSS2.SVG1,
Пользовательские агенты только для CSS1 и только для CSS2 могут реализовывать старую модель.
и по-прежнему заявляют о соответствии этой части CSS 2.1. (Это не
применяется к UA, разработанным после выпуска данной спецификации.)
 Примеры:
 В следующем примере для HTML текстовое содержимое всех
Элементы, выступающие в качестве гиперссылок (независимо от того, посещены они или нет), будут подчеркнуты:
 
a: посещено, a: ссылка {text-decoration: underline}
  
 Пример (ы):
 В следующей таблице стилей и фрагменте документа:
 
   цитата {украшение текста: подчеркивание; цвет синий; }
   em {display: block; }
   цитируй {цвет: фуксия; }
  
 
   <цитата>
    
     
      Помогите помогите!
       Я под шляпой! 
       —GwieF 
     
    
   
  
 … подчеркивание элемента цитаты переносится на
анонимный встроенный элемент, который окружает элемент span, вызывая
текст «Помогите, помогите!» быть синим, с синим подчеркиванием от
анонимная строка под ним, цвет взят из
элемент цитаты.   текст   в блоке em также подчеркнут,
как в блоке в потоке, на который распространяется подчеркивание. Последняя строка текста — фуксия, но подчеркивание
под ним по-прежнему остается синее подчеркивание анонимного встроенного
элемент.
 На этой диаграмме показаны блоки, использованные в приведенном выше примере. Округлый
морская линия представляет собой анонимный встроенный элемент, оборачивающий встроенный
содержимое элемента абзаца закругленная синяя линия представляет
элемент span, а оранжевые линии представляют блоки.
  ‘межбуквенный интервал’ 
  Значение:  нормальное | <длина> | наследовать
  Начальный:  нормальный
  Применимо к:  всем элементам
  Унаследовано:  да
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение:  «нормальная» или абсолютная длина
 Это свойство определяет поведение интервала между
текстовые символы.Значения имеют следующие значения:
 нормальный
 Интервал — это нормальный интервал для текущего шрифта.
Это значение позволяет пользовательскому агенту изменять пространство
между символами для выравнивания текста.
 <длина>
 Это значение указывает межсимвольный интервал  в
в дополнение к  пробел по умолчанию между
символы. Значения могут быть отрицательными, но могут быть
ограничения, зависящие от реализации.
Пользовательские агенты не могут в дальнейшем увеличивать или уменьшать межсимвольные
пробел для выравнивания текста.
 Алгоритмы интервалов между символами зависят от пользовательского агента.
 Примеры:
 В этом примере пробел между символами в
Элементы BLOCKQUOTE увеличиваются на 0,1em.
 
цитата {letter-spacing: 0.1em}
  
 В следующем примере пользовательский агент не разрешен
изменить межсимвольный интервал:
 
blockquote {letter-spacing: 0cm} / * То же, что и '0' * /
  
 Когда результирующий пробел между двумя символами не совпадает с
пространство по умолчанию, пользовательские агенты не должны использовать
лигатуры.
  ‘интервал между словами’ 
  Значение:  нормальное | <длина> | наследовать
  Начальный:  нормальный
  Применимо к:  всем элементам
  Унаследовано:  да
  В процентах:  Н / Д
  Медиа:  визуальный
  Вычисленное значение:  для «нормального» значения «0»; в противном случае абсолютная длина
 Это свойство определяет поведение интервала между словами.Значения имеют следующие значения:
 нормальный
 Нормальный межсловный интервал, определенный текущим шрифтом и / или  UA .
 <длина>
 Это значение указывает межсловный интервал  в
в дополнение к  пробел по умолчанию между
слова. Значения могут быть отрицательными, но могут быть
ограничения, зависящие от реализации.
 Алгоритмы интервалов между словами зависят от пользовательского агента. Интервал между словами
также зависит от выравнивания (см. свойство text-align).Межсловный интервал влияет на каждый пробел (U + 0020) и неразрывный пробел
(U + 00A0), оставленный в тексте после того, как правила обработки пробелов
был применен. Влияние свойства на другие слова-разделители
символов не определено. Однако общая пунктуация, символы с
нулевая ширина продвижения (например, ноль с пробелом U + 200B) и
пробелы фиксированной ширины (например, U + 3000 и U + 2000 — U + 200A) не
затронутый.
 Примеры:
 В этом примере интервал между словами в элементах h2 равен
увеличено на 1em.
 
h2 {word-spacing: 1em}
  
  ‘преобразование текста’ 
  Значение:  капитализировать | прописные | строчные | нет | наследовать
  Начальный:  нет
  Применимо к:  всем элементам
  Унаследовано:  да
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение:  как указано
 Это свойство контролирует эффект капитализации
текст элемента.Значения имеют следующие значения:
 заглавные буквы
 Переводит первый символ каждого слова в верхний регистр; другие персонажи не затронуты.
 прописные
 Переводит все символы каждого слова в верхний регистр.
 строчная
 Переводит все символы каждого слова в нижний регистр.
 нет
 Без эффекта капитализации.
 Фактическое преобразование в каждом случае — письменный язык
зависимый.См. BCP 47 ([BCP47]), чтобы узнать, как найти язык
элемент.
 Только символы, принадлежащие «двухпалатным скриптам» [UNICODE],
затронутый.
 Примеры:
 В этом примере весь текст в элементе h2 преобразуется в верхний регистр.
текст.
 
h2 {преобразование текста: верхний регистр}
  
  ‘белое пространство’ 
  Значение:  нормальное | предварительно | nowrap | предварительная упаковка | предварительная линия | наследовать
  Начальный:  нормальный
  Применимо к:  всем элементам
  Унаследовано:  да
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение:  как указано
 Это свойство объявляет, насколько пустое пространство внутри элемента
обработано.Значения имеют следующие значения:
 нормальный
 Это значение указывает пользовательским агентам свернуть последовательности
пробелов и разрывов строк по мере необходимости для заполнения строчных полей.
 до
 Это значение предотвращает свертывание последовательностей пользовательскими агентами.
белого пространства. Строки разрываются только у сохраненных символов новой строки.
 nowrap
 Это значение уничтожает пустое пространство, как для «нормального», но подавляет
разрывы строк в тексте.
 предварительная упаковка
 Это значение предотвращает свертывание последовательностей пользовательскими агентами.
белого пространства.Строки разрываются на сохраненных символах новой строки,
и по мере необходимости заполнять строчные поля.
 предварительная линия
 Это значение указывает пользовательским агентам сворачивать последовательности белого
Космос. Строки разрываются на сохраненных символах новой строки, а как
необходимо заполнить строчные поля.
 Новые строки в источнике могут быть представлены символом возврата каретки
(U + 000D), перевод строки (U + 000A) или оба (U + 000D U + 000A) или какой-либо другой
механизм, определяющий начало и конец сегментов документа,
такие как токены SGML RECORD-START и RECORD-END.CSS
Модель обработки «белого пространства» предполагает, что все символы новой строки были
нормализовано до перевода строки.
UA, которые распознают другие представления новой строки, должны применять белый
правила обработки пространства, как если бы эта нормализация имела место. Если нет
правила новой строки указаны для языка документа, каждая каретка
возврат (U + 000D) и последовательность CRLF (U + 000D U + 000A) в тексте документа
рассматривается как символ перевода строки.
Это правило нормализации по умолчанию также применяется к сгенерированным
содержание.
 UA должны распознавать перевод строки (U + 000A) как символы новой строки.UA
может дополнительно обрабатывать другие символы принудительного разрыва как новую строку
символов на UAX14.
 Примеры:
 Следующие примеры показывают, какое поведение пробелов ожидается.
из элементов PRE и P и атрибута nowrap в HTML.
 
pre {white-space: pre}
p {пробел: нормальный}
тд [nowrap] {пробел: nowrap}
  
 Кроме того, действие элемента HTML PRE с нестандартным атрибутом  «wrap»  демонстрируется в следующем примере:
 
предварительный [перенос] {пробел: предварительный перенос}
  
 16.6.1 Модель обработки белого пространства 
 Для каждого встроенного элемента (включая анонимные встроенные элементы)
выполняются следующие шаги, обрабатывая символы форматирования двунаправленного текста, как если бы
их там не было:
 Каждая табуляция (U + 0009), возврат каретки (U + 000D) или пробел (U + 0020)
символ, окружающий символ перевода строки (U + 000A), удаляется, если
‘white-space’ установлен в ‘normal’, ‘nowrap’ или ‘pre-line’.
 Если для ‘white-space’ установлено значение ‘pre’ или ‘pre-wrap’, любая последовательность
 пробелы (U + 0020), не разделенные границей элемента, рассматриваются как
 последовательность неразрывных пробелов.Однако для ‘pre-wrap’ разрыв строки
 возможность существует в конце последовательности.
 Если для ‘white-space’ установлено значение ‘normal’ или ‘nowrap’, перевод строки
 символы преобразуются для целей рендеринга в один из
 следующие символы: пробел, пробел нулевой ширины
 символ (U + 200B) или без символа (т. е. не отображается),
 согласно алгоритмам, специфичным для UA, на основе сценария контента.
 Если для ‘white-space’ установлено значение ‘normal’, ‘nowrap’ или ‘pre-line’, каждая табуляция (U + 0009) преобразуется в пробел (U + 0020)
 любой пробел (U + 0020) после другого пробела (U + 0020) — даже
 пробел перед строчкой, если в этом пробеле также есть
 ‘white-space’ установлен в ‘normal’, ‘nowrap’ или ‘pre-line’ — удаляется.
 Затем выкладываются инлайны блочного контейнера. Прокладываются строчки
вне, принимая биди
переупорядочивание и упаковка, как указано в
свойство white-space.
При переносе возможности разрыва строки определяются на основе
в тексте до шагов по удалению белого пространства, описанных выше.
 Поскольку каждая строка выложена,
 Если пробел (U + 0020) в начале строки содержит «пробел»
 установлен на ‘normal’, ‘nowrap’ или ‘pre-line’, он удаляется.
 Все вкладки (U + 0009) отображаются как горизонтальный сдвиг, что строки
 вверх от начального края следующего глифа до следующей позиции табуляции. Вкладка
 остановки происходят в точках, кратных 8 ширине
 пробел (U + 0020), отображаемый шрифтом блока из
 край начального содержимого.
 Если для пробела (U + 0020) в конце строки установлено значение white-space
 ‘normal’, ‘nowrap’ или ‘pre-line’, он также удаляется.
 Если пробелы (U + 0020) или табуляции (U + 0009) в конце строки имеют
 ‘white-space’ установлен на ‘pre-wrap’, UA могут визуально сворачивать их.
 Плавающие и абсолютно позиционированные элементы не образуют линии
возможность сломать.
   Примечание.  CSS 2.1 не полностью определяет, где возникает возможность разрыва строки. 
 16.6.2 Пример двунаправленности со сворачиванием пробелов 
 Учитывая следующий фрагмент разметки, с особым вниманием к пробелам (с различным фоном и границами для выделения и идентификации):
 
 
      A  B  C 

  
 … где элемент    представляет вложение слева направо и
элемент    представляет вложение справа налево, а
предполагая, что свойство ‘white-space’ установлено в ‘normal’,
приведенная выше модель обработки приведет к следующему:
 Пространство перед B () схлопнется вместе с пробелом после A ().
 Пробел перед C () схлопнется вместе с пробелом после B ().
 Это оставит два пробела, один после A слева направо.
уровень вложения, и один после B при встраивании справа налево
уровень.Затем он отображается в соответствии с двунаправленным Unicode.
алгоритм, с конечным результатом:

     А до н.э.

 
 Обратите внимание, что между A и B есть два пробела, а между B — ни одного.
и C. Этого иногда можно избежать, используя естественную двунаправленность
символов вместо явных уровней встраивания. Кроме того, это хорошо
чтобы избежать пробелов непосредственно внутри начального и конечного тегов, поскольку они имеют тенденцию
делать странные вещи при схлопывании пустого пространства.
 16.6.3 Элементы управления и комбинирования символов 
 Управляющие символы, кроме U + 0009 (табуляция), U + 000A (перевод строки),
U + 0020 (пробел) и U + 202x (символы форматирования двунаправленного текста) обрабатываются как
символы для рендеринга так же, как и любого обычного символа.
 Объединение символов следует рассматривать как часть символа.
с которыми они должны сочетаться. Например: первая буква
стилизует весь глиф, если у вас есть контент вроде
« o  & # x308;  «; это не просто
соответствовать базовому символу.
 CSS | Свойство text-indent — GeeksforGeeks 
   
  <  html  > 
    <  Головка  > 
    <  титул  > 
    CSS свойство text-indent 
      титул  > 
  
  
    <  стиль  > 
   .судо {
    текстовый отступ: 70 пикселей; 
   } 
  
    .geeks {
    отступ текста: -5em; 
   } 
  
    .gfg {
    отступ текста: 40%; 
   } 
      стиль  > 
      головка  > 
  
    <  корпус  > 
    <  h2   style   =   ""  > GeeksforGeeks   h2  > 
    <  h3  > свойство text-indent   h3  > 
  
    <  h3  > text-indent: 70px:   h3  > 
    <  div   класс   =   «sudo»  > 
    Подготовка к приводу продукта 
    компаний, таких как Microsoft, Amazon, Adobe 
    и т. Д. С бесплатной онлайн-подготовкой к зачислению 
    конечно.Курс посвящен различным MCQ 
.    & Вопрос по кодированию, который может быть задан в 
    собеседование и сделайте ваше предстоящее размещение 
    сезон результативный и удачный. 
      дел  > 
  
    <  h3  > текстовый отступ: -5em:   h3  > 
    <  div   class   =   «компьютерщики»  > 
    Подготовка к приводу продукта 
    компаний, таких как Microsoft, Amazon, Adobe 
    и т. Д. С бесплатной онлайн-подготовкой к зачислению 
    конечно.Курс посвящен различным MCQ 
.    & Вопрос по кодированию, который может быть задан в 
    собеседование и сделайте ваше предстоящее размещение 
    сезон результативный и удачный. 
      дел  > 
  
    <  h3  > отступ текста: 40%:   h3  > 
    <  дел   класс   =   «gfg»  > 
    Подготовка к приводу продукта 
    компаний, таких как Microsoft, Amazon, Adobe 
    и т. Д. С бесплатной онлайн-подготовкой к зачислению 
    конечно.Курс посвящен различным MCQ 
.    & Вопрос по кодированию, который может быть задан в 
    собеседование и сделайте ваше предстоящее размещение 
    сезон результативный и удачный. 
      дел  > 
  
      корпус  > 
    html  > 
 Как установить отступ второй строки абзаца с помощью CSS? 
 Как установить отступ второй строки абзаца с помощью CSS?
 Есть несколько способов сделать отступ во второй строке абзаца, и это можно сделать разными способами.Некоторые из методов достижения этого описаны ниже с надлежащим кодом и выводом. Теперь некоторые стили можно сделать с помощью CSS различными способами, чтобы отступить во второй строке по мере необходимости.
  Примечание:  По умолчанию, когда строки переносятся, они просто начинаются прямо под тем местом, где начиналась предыдущая строка. Взгляните на следующее, чтобы увидеть это в действии:
  Синтаксис: 
 / * значения длины * /
отступ текста: 3мм;
текстовый отступ: 40 пикселей;

/ * процентное значение
относительно ширины содержащего блока * /
отступ текста: 15%;

/ * Значения ключевых слов * /
текстовый отступ: 5em на каждую строку;
отступ текста: 5em висит;
text-indent: 5em, висящая на каждой строке;

/ * Глобальные значения * /
текст-отступ: наследовать;
текст-отступ: начальный;
текст-отступ: не установлен; 
 Метод 1: В этом примере первая строка текста не имеет отступа, но последующие строки второй строки имеют отступ, поэтому первая строка не перемещается.В этом примере это достигается путем установки значения text-indent равным -36px и значения padding-left равным 36px. В этом примере начальный тег div содержит следующую информацию о стиле в качестве атрибутов.
  Пример: 
 
 
   
  <  html  > 
  
  <  голова  > 
    <  титул  > 
    Установить отступ во второй строке абзаца 
      титул  > 
  
    <  meta   name   =   "viewport"   content   = 
    "ширина = ширина устройства, начальный масштаб = 1.0 "  /> 
  
    <  стиль  > 
    h3 {
    выравнивание текста: по центру; 
   } 
  
    див.а {
    отступ текста: -36 пикселей; 
    padding-left: 36px; 
   } 
      стиль  > 
    головка  > 
  
  <  корпус  > 
    <  h3  > <  u  > GEEKS FOR GEEKS   u  >   h3  > 
  
    <  div   class   =   "a"  > 
    <  p  > 
    <  b  > Компьютерщики для компьютерных фанатов   b  >   a  > как просто блог-сайт с 
    статей по вопросам программирования, затем расширены 
    на курсы, а теперь это портал, посвященный программированию 
    вопросов, интервью и даже платформа для кодирования 
    черпая вдохновение из других конкурентных сайтов по кодированию.
      p  > 
      дел  > 
    корпус  > 
  
    html  > 
  Выход:  
  Метод 2:  Установив положение относительно первой строки, установите для text-indent значение -26px и значение padding-left равным 26px.Здесь, в этом примере, мы установили положение второй строки относительно первой. Таким образом, вторая строка имеет отступ / выравнивание в соответствии с первой строкой.
  Пример: 
   
  <  html  > 
  
  <  голова  > 
    <  титул  > 
    Установить отступ во второй строке абзаца 
      титул  > 
  
    <  meta   name   =   "viewport"   content = "  width   =   device   -width, 
    начальная   =   1  .0 "/> 
  
    <  стиль  > 
    кузов {
  
    поле: 15 пикселей; 
    семейство шрифтов: Times New Roman; 
   } 
  
    # контейнер {
    маржа: 0 авто; 
    максимальная ширина: 500 пикселей; 
   } 
  
    # контейнер p {
    border-top: solid 3px # 808080; 
    маржа: 0; 
    padding-top: 15px; 
    размер шрифта: 1.4em; 
    font-weight: 100; 
    line-height: 1.6em; 
   } 
  
    # контейнер h2 пролет {
    цвет: # 008000; 
   } 
  
    # контейнер h2 {
    text-indent: -26px; 
    padding-left: 26px; 
   } 
      стиль  > 
    головка  > 
  
  <  корпус  > 
    <  div   id   =   «контейнер»  > 
    <  h2  > 
    <  диапазон  > #   диапазон  > 
    GeeksforGeeks :: Портал компьютерных наук для гиков 
      h2  > 
  
    <  b  > Вундеркинды для вундеркиндов   b  >   a  > просто как блог-сайт 
    со статьями по вопросам программирования, затем 
    расширен до курсов и теперь является порталом, охватывающим 
    вопросов по программированию, интервью и даже 
    Платформа кодирования, вдохновленная другими 
    сайтов конкурентного кодирования.
      p  > 
      дел  > 
    корпус  > 
  
    html  > 
  Выход:  
 выступов 
 Есть вопросы? Обсудите это руководство по HTML5 / JavaScript с другими на
форумы.
 По умолчанию, когда строки переносятся, они просто появляются прямо под тем местом, откуда начиналась предыдущая строка. Взгляните на заголовок  # Really Tied the Room Together  в следующем примере, чтобы увидеть это поведение по умолчанию в действии:
 Во многих случаях такое поведение упаковки - это именно то, что нам нужно. Мы бы никогда не подумали иначе. Ну ...   никогда   не совсем точно. Бывают случаи, когда мы с вами действительно хотели бы, чтобы обернутые строки имели фиксированный отступ:
 В случае нашего заголовка мы хотим, чтобы символ # был визуально отделен от остального текста, чтобы последующие строки имели отступ при переносе.У этого типа отступа есть название, в котором все строки, кроме первой, имеют отступ. Этот тип отступа известен как выступ  .
 Другой распространенный пример этого типа отступов связан с цитатами:
 Многие форматы цитирования требуют, чтобы вторая (и последующие строки) имела отступ, а первая строка была выровнена по левому краю.
 Вероятно, есть еще миллиард других причин, чтобы хотеть висящего отступа, который идет за пределами этих двоих, о которых мы говорили до сих пор.Неважно, по какой причине вы делаете отступ в обернутом тексте. Если вам нужно это сделать, то дерзайте! Этот учебник поможет. В следующих разделах мы рассмотрим, как реализовать наш эффект висячего отступа, используя только CSS.
 и далее!
 Выполнение выступов 
 Мы будем реализовывать висячий отступ, полагаясь на свойства CSS padding-left и text-indent. Чтобы наглядно представить, как эти свойства будут работать, давайте снова начнем с нашего предыдущего заголовка:
 Свойство text-indent смещается туда, откуда начинается наша первая строка по горизонтали.По умолчанию первая строка начинается слева без отступа. Для висячего отступа мы хотим изменить его, отступив еще левее, чем начальная точка:
 Сначала это может показаться немного странным, но мы сдвинем все назад вправо от начальной позиции нашей строки, используя свойство padding-left:
 Конечным результатом является предполагаемое поведение висячего отступа. Нам просто пришлось использовать некоторые хитрости CSS, чтобы получить точный эффект, играя со свойствами text-indent и padding-left.
 Простой пример 
 Теперь, прежде чем мы закончим, мы собираемся перевести все изображения и слова из предыдущего раздела в некоторый настоящий CSS, который связывает все это воедино. Создайте новый HTML-документ и добавьте в него следующие элементы:
  



   Выступающий отступ 
  
  <стиль>
    тело {
      цвет фона: # FFDA45;
      маржа: 15 пикселей;
      семейство шрифтов: без засечек;
    }
    #container {
      маржа: 0 авто;
      максимальная ширина: 500 пикселей;
    }
    #container p {
      border-top: solid 4px # 846A00;
      маржа: 0;
      padding-top: 15 пикселей;
      размер шрифта: 1.4em;
      font-weight: 100;
      высота строки: 1.6em;
    }
    #container h2 span {
      цвет: # CC0000;
    }
  



  
      
  #  Действительно связали комнату вместе 
     Etiam sit amet dapibus ex. Morbi augue massa, pretium sed semper et, tristique tempus velit. Proin tellus sapien, pulvinar et lacus id, sollicitudin facilisis ante. Nullam varius justo a nibh pulvinar, in malesuada turpis vestibulum.Donec hendrerit porttitor rhoncus. 
  


  
 Уделите несколько минут, чтобы просмотреть весь HTML и CSS, который вы видите. Здесь не так много всего, кроме того, что мы пытаемся сделать какой-нибудь текст красивым. После того, как вы просмотрели этот файл, давайте просмотрим его в браузере. Сохраните этот документ, откройте его в своем любимом браузере и изменяйте размер браузера, пока не появится заголовок.
 Если все работает правильно, вы должны увидеть что-то похожее на следующее изображение:
 Что мы собираемся сделать, так это придать нашему заголовку некоторую сладкую магию висячих отступов! Вернитесь к HTML и добавьте следующее правило стиля чуть выше закрывающего тега стиля:
  #container h2 {
  текстовый отступ: -26px;
  отступ слева: 26 пикселей;
}  
 После внесения этого изменения сохраните наш HTML-документ и просмотрите его в браузере в последний раз.На этот раз вы должны увидеть что-то вроде этого:
 Обратите внимание, что наш заголовок теперь имеет правильный отступ и просто торчит. Возвращаясь к добавленному нами CSS, мы упоминали ранее, что висячий отступ реализуется с помощью свойств text-indent и padding-left:
  #container h2 {
  текстовый отступ: -26px;
  отступ слева: 26 пикселей;
}  
 Отрицательное значение text-indent сдвигает наш отступ влево. Это сместит нашу первую строку за пределы начальной точки, с которой наши глаза ожидают начала текста.Чтобы компенсировать это, мы сдвигаем весь наш текст, устанавливая для свойства padding-left положительную версию значения, которое мы установили для text-indent. В нашем примере мы смещаем отступ и отступ на  -26 пикселей  и  26 пикселей  соответственно. Точное значение для использования - это то, которое вам нужно будет определить на основе вашего шрифта, размера шрифта и желаемого расстояния отступа. Уф!
 Есть вопрос или просто хотите поболтать? Оставьте комментарий ниже или загляните на наши форумы (на самом деле это одно и то же!), Где самые дружелюбные люди, с которыми вы когда-либо столкнетесь, будут рады вам помочь!
 Когда Кирупа не занят тем, что пишет о себе от третьего лица, он практикует социальное дистанцирование… даже в своих профилях в Twitter, Facebook и LinkedIn.
No related posts.

Значение:	<длина> \| <процент> \| наследовать
Начальный:	0
Применимо к:	блок-контейнерам
Унаследовано:	да
Проценты:	относятся к ширине содержащего блока
Медиа:	визуальный
Вычисленное значение:	указанный процент или абсолютная длина

Свойство	Описание
margin	Сокращенное свойство для задания свойств полей в одном объявлении
margin-bottom	Устанавливает нижнее поле элемента
margin-left	Задает левое поле элемента
margin-right	Задает правое поле элемента
margin-top	Задание верхнего поля элемента

Значение:	осталось \| право \| центр \| оправдать \| наследовать
Начальное:	безымянное значение, которое действует как «влево», если «направление» равно «ltr», ‘right’, если ‘direction’ равно ‘rtl’
Применимо к:	блок-контейнерам
Унаследовано:	да
В процентах:	Н / Д
Медиа:	визуальный
Вычисленное значение:	начальное значение или указанное

Значение:	нет \| [подчеркивание \|\| надстрочный \|\| сквозной \|\| мигать] \| наследовать
Начальный:	нет
Применимо к:	всем элементам
Унаследовано:	нет (см. Прозу)
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	как указано

Значение:	нормальное \| <длина> \| наследовать
Начальный:	нормальный
Применимо к:	всем элементам
Унаследовано:	да
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	«нормальная» или абсолютная длина

Значение:	капитализировать \| прописные \| строчные \| нет \| наследовать
Начальный:	нет
Применимо к:	всем элементам
Унаследовано:	да
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	как указано

Значение:	нормальное \| предварительно \| nowrap \| предварительная упаковка \| предварительная линия \| наследовать
Начальный:	нормальный
Применимо к:	всем элементам
Унаследовано:	да
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	как указано

Html отступ слева: Как изменить отступ слева от маркеров списка?

margin-left — внешний отступ слева

Поддержка браузерами

Описание

Синтаксис

Значения свойства

Пример

Параметры отступов. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов.

margin, padding | lesson-web.ru

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

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

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

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

Свойство margin

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

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

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

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

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

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

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

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

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

CSS Padding — Отступ. Уроки для начинающих. W3Schools на русском

CSS Padding — Внутренний отступ

Padding — Отдельные стороны

Пример

Padding — Сокращенное свойство

Пример

Пример

Пример

Пример

Padding и Width

Пример

Пример

Больше примеров

Проверьте себя с помощью упражнений!

Все CSS свойства отступа

Отступы в CSS (margin и padding)

Внешний отступ (margin)

Внутренний отступ (padding)

Проблема расширения (box-sizing)

Margins внешние отступы CSS уроки для начинающих академия

Поля CSS

Маржа-отдельные стороны

Пример

Маржа-Сокращенное свойство

Пример

Пример

Пример

Пример

Значение Auto

Пример

Наследуемое значение

Пример

Свернуть маржи

Пример

Все свойства полей CSS

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

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

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

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

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

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

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

Исключения

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

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

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

Автоотступ

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

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

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

Отступ с HTML

HTML абзац и отступ первой строки

Пункты

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

Отступ первой строки

Текст

16.3.1 Подчеркивание, подчеркивание, выделение и мигает: «текст-украшение» недвижимость

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

`Как установить отступ второй строки абзаца с помощью CSS?`

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