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

Leave a Comment / Css / By /

Содержание

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

  • Отступ текста
  • Форматирование

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

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

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

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

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

p { text-indent: 30px; }

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

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

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

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

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

Попробовать »

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

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

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

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

Попробовать »

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

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

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

Попробовать »

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

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

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

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

Попробовать »

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

  • Выравнивание текста в CSS
  • Цвет и тень текста в CSS
  • Как изменить шрифт в CSS
  • CSS стиль и размер шрифта
  • Стандартные (безопасные) шрифты

Поля и отступы в CSS

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

Разницу между полем и отступом можно увидеть на следующем рисунке:

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

Посмотреть демо-версию и код

У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.

  • Отступы в CSS — cинтаксис CSS-свойств padding и margin
  • Синтаксис CSS-свойства padding
  • Пример для установки полей и отступов в HTML-списке
  • Демонстрация полей на примере HTML-таблицы
  • Пример использования полей и отступов с элементом form

Синтаксис, который используется для единичного объявления свойства CSS margin:

margin: 50px;

Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS.

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

margin: 10px 20px 50px 100px;

Где:

  • 10px — отступ сверху CSS;
  • 20px — отступ справа CSS;
  • 30px — отступ снизу CSS;
  • 40px — отступ слева CSS.

Также можно установить отступ слева CSS и другие направления отдельно:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.

Единичное объявление с одним значением:

padding: 50px;

Для каждого направления одиночным объявлением:

padding: 10px 20px 50px 100px;

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.

Для каждого направления в отдельности:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Во вступительной части я показал свойства margin и padding, используемые в элементе div. В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div. Он содержит пункты меню в виде гиперссылок.

Список задается и другими свойствами CSS, но без использования свойств HTML margin и padding он будет выглядеть так:

Посмотреть демо-версию и код

Добавив поля 10px для ссылок внутри <ul>:

padding: 10px;

мы получим следующий вид:

Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:

Посмотреть онлайн демо-версию и код

Весь класс для ссылок внутри элемента <ul> будет следующим:

padding: 10px;
margin: 2px;
text-decoration: none;
color: #fff;
background-color: #DA8119;
display:block;

Ниже приводится пример использования свойства padding в HTML-таблице. Я создал таблицу с несколькими строками.

Для таблицы заданы стили с помощью различных свойств CSS. Сначала посмотрите, как выглядит таблица без применения свойства padding:

Посмотреть демо-версию и код

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

Посмотреть демо-версию и код

Ниже приводится код стилей, которые используются для <td>. Весь код можно увидеть, перейдя по ссылке выше:

padding: 20px;
border: dashed 1px #DF7000;
background: #D0E8AC;
color: #000;

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

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

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

Добавив поля к классу текстовых полей и классу кнопки btn, мы получим форму, выглядящую следующим образом:

Поля для текстовых полей:

padding: 10px;

Поля для кнопки:

padding: 9px 15px;

Посмотреть демо-версию и код

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

margin: -3px;

Поля формы будут выглядеть следующим образом:

Посмотреть демо-версию и код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

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

Для кнопки “Save” мы также применили свойство padding:

padding: 9px 15px;

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

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

Вадим Дворниковавтор-переводчик статьи «CSS padding and margin – Explained with 4 HTML elements»

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

Свойство CSS text-indent служит для задания отступов в начале абзаца.

Синтаксис CSS text-indent

Где value принимает значение в пикселях или в процентах. Например

Пример: как отступ в начале абзаца для первой строки

Приведем пример с отступом в начале первой строки каждого абзаца в размере 20 пикселей.

На странице преобразуется в следующее

Пример с отступом. Выравнивание текста по левому краю. Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Отступы можно также задавать и более «изощренным» способом. Через знак пробела

Чтобы сделать отступ перед текстом, добавим перед текстом html код пробела — &nbsp;. Например

Но это стоит делать лишь в редких исключениях. Потому что для этого есть свойство CSS text-indent .

Бывают и еще более сильные изощрения. Можно в начале каждой строки вставлять «невидимое» изображение или наоборот видимое, если есть цель чем-то приукрасить начало абзаца. Например

Большую часть времени веб-разработчики тратят на то, где будет располагаться текст и, как он будет выглядеть. Существует множество свойств, которые позволяют работать с текстом. Иногда текст и шрифты используют как синонимы. Разделим эти два понятия. Текст – это содержимое, а шрифт – это то, что отображает содержимое.

Одним из самых распространенных эффектов является отступ первой строки абзаца (в просторечие: красная строка). Он позволяет создать видимость структурированности текста.

Свойство text-indent реализует отступы в CSS. Рассмотрим его синтаксис:

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

В результате первая строка абзацев будет сдвинута на 1.5em . Если задать отрицательное значение, то получится не отступ, а выступ, т. е. первая строка будет выдвинута влево, относительно элемента.

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

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

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

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

Свойство margin

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

margin-top | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6. 0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+
Краткая информация
Версии CSS
Описание

Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от верхнего края элемента

Синтаксис

margin-top: значение | auto | inherit

Значения

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

auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.

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

Рис. 2. Применение свойства margin-top

Объектная модель
Браузеры

Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

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

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

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

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

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

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

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

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

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

Примечание: стоит обратить внимание, что свойство text-indent

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

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

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

text-indent | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+3.5+1.0+1.0+1.0+1.0+
Краткая информация
Версии CSS
Описание

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

Синтаксис

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

Значения

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

inherit Наследует значение родителя.

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

Рис. 1. Применение свойства text-indent

Объектная модель

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

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

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

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

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

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

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

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

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

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

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

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

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

Безусловно, любое количество пробелов можно вставить с помощью &nbsp;, тем самым, подобрав необходимый отступ, но, наверняка, Вы понимаете, что данный способ, мягко говоря, неудобный. А решение этой задачи очень простое.

Вы уже должны знать, что в HTML абзац создаётся с помощью тега <p>. Таким образом, каждый абзац должен быть в своём теге <p>. А для создания отступов первой строки каждого абзаца достаточно подключить такой CSS-код:

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Научитесь использовать отступы в содержимом

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

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

Содержимое

  • Что такое отступ CSS?
  • Как отступить в CSS
    • — пропустите первое параграф.
    • – Значения ключевых слов
  • Почему используется свойство Text-Indent?
  • Как работает отступ на адаптивных страницах?
  • Проблемы со свойством Text-Indent
  • Можно ли использовать анимацию для отступов?
  • Использование полей и отступов вместо свойства Text-Indent
  • Заключение

Что такое отступ CSS?

Свойство indent используется для размещения пробела перед текстовой строкой. Итак, вы можете установить отступ, длину этого пустого пространства, присвоив значение свойству CSS отступ . Если оставить небольшой пробел перед первой строкой в ​​начале нового текстового абзаца , содержимое будет выглядеть упорядоченным и прост для понимания, а профессиональный способ сделать это — использовать свойство отступа текста CSS.

Направление отступа зависит от направления компоновки. Отступ будет установлен по отношению к левому краю для макетов слева направо и по правому краю для макетов справа налево.

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

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

Кроме того, чтобы сделать отступ абзаца CSS, установите свойство с некоторым значением и используйте его в селекторе типа CSS

.

— Пропустить отступ первого абзаца

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

p+p {текстовый отступ: 2em;}

– Отступ списка

Если у вас есть упорядоченный список на вашей странице и вы хотите сделать его отступ , чтобы он выглядел заметным, свойство CSS indent может вам здесь не помочь . Элемент списка получает отступ по умолчанию; вы можете использовать свойство margin-left или padding-left, если хотите создать больший отступ или изменить отступ по умолчанию.

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

.indent{
padding-left: 20px;
}

– Отступ

маркированных пунктов получают отступ так же, как элементы списка . Сказав это, свойство text-indent здесь не работает, поэтому вы можете использовать свойства margin-left или padding-left для отступа ваших маркеров, как мы сделали здесь:

. indent{
margin -слева: 10px;
}

Значения свойств: длина, ключевое слово и процент

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

– Значения длины

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

При использовании значения длины важным фактором, который следует учитывать, является единица измерения, которую вы используете, , поскольку расстояние для каждой единицы отличается, и вы не можете его изменить. Когда вы присваиваете какое-либо числовое значение единице измерения, вы умножаете число на длину этого номера единицы, и это значение указывается в конце. Таким образом, 7px не будет таким же, как 7em , из-за того, что «px» и «em» имеют разные заданные значения длины.

Здесь можно разные единицы как px, em, in, pc, pt. Где один дюйм равен 2,54 см или 96 пикселей, один pc равен ⅙ одного дюйма, один pt равен 1/72 одного дюйма, а один пиксель равен 1/96 одного дюйма.

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

— Процентные значения

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

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

— Значения ключевых слов

Первое значение ключевого слова — это значение «каждой строки», и оно используется для размещения отступа в первой строке и каждой строке после принудительного разрыва строки . Затем второе значение ключевого слова — «висит», которое используется для отступа в CSS для каждой строки, кроме первой строки. Можно сказать, что это значение имеет эффект, обратный этому свойству.

Почему используется свойство Text-Indent?

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

Как работает отступ на адаптивных страницах?

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

Проблемы со свойством Text-Indent

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

Это самая распространенная проблема, с которой большинство людей сбивается.

Можно ли использовать анимацию для отступов?

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

Вот как это сделать:

Использование полей и отступов вместо свойства Text-Indent

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

Заключение

Ниже вы найдете краткий обзор этой темы в ключевых моментах, которые мы обсуждали:

  • Свойство text-indent CSS используется для перемещения первой строки на веб-странице дальше от поля
  • Отступ будет касаться левого края в макетах слева направо и правого края в макетах справа налево
  • Для этого свойства можно использовать значения длины и процентные значения
  • Значение длины содержит числовое значение с единицей измерения. Разные единицы измерения содержат разную длину расстояний
  • Процентное значение представляет процент ширины содержащего его элемента
  • Вы можете использовать значение «каждое ключевое слово», чтобы поместить отступ для первой строки и каждой строки для принудительного разрыва строки
  • Значение ключевого слова «висячий» используется со свойством для отступа всех строк, кроме первой строки
  • Вы также можете пропустить отступ первого абзаца, и для этого вам нужно использовать свойство text-indent в соседнем родственном комбинаторе
  • Это свойство очень полезно, когда вы хотите сделать отступ в списках или маркированных элементах; вы можете использовать margin-left и padding-left, в этом отношении тоже
  • Свойство text-indent очень хорошо работает с адаптивными страницами
  • Использование этого свойства для встроенных элементов, а не элементов уровня блока, может не дать ожидаемого результата
  • Вы также можете анимировать функцию отступа, используя анимацию для элемента и используя text-indent в правиле @keyword

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

  • Автор
  • Последние сообщения

Должность — это все

Должность — это все: Ваш ресурс для изучения и создания: CSS, JavaScript, HTML, PHP, C++ и MYSQL.

Последние сообщения Position is Everything (посмотреть все)

отступ — бесплатная онлайн-библиотека Wikisource

Взято из Wikisource

Перейти к навигацииПерейти к поиску

Этот шаблон добавляет отступ к тексту с помощью свойства CSS text-indent . Это свойство управляет отступом первая строка абзаца текста. Можно указать любую допустимую единицу CSS, но предпочтительнее использовать em. Отступ может быть 0 , чтобы отключить унаследованный отступ, или отрицательным для достижения различных специальных эффектов, таких как висячие отступы (но для этого используйте {{висячий отступ}} ). Значение по умолчанию — 2em .

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

См. политику отступа абзаца.

Содержимое

  • 1 Применение
  • 2 аргумента
  • 3 примера
    • 3.1 Основное применение
  • 4 См. также

Основным соглашением о вызовах для этого шаблона является блочное:

{{ ти/с | CSS unit }} … text … {{ ti/e }}


соглашение о встроенных вызовах:

{{ти| Узел CSS | text }}


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

Аргументы[править]

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

  {{ти}} {{ти/с}}
1= длина длина
2= текст —

Примеры elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Пример: с пользовательской длиной

 {{ti/s|5em}}{{lorem ipsum}}{{ti/e}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Пример: переопределение унаследованного текстового отступа

 {{ti/s|5em}}
{{лорем ипсум}}
{{ti/s|0}}{{lorem ipsum}}{{ti/e}}
{{лорем ипсум}}
{{ti/e}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Пример: висячий отступ

 {{левое поле|2em}}
{{ti/s|-2em}}{{lorem ipsum}}{{ti/e}}
{{div end}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Основное использование[править]

{{text-indent| Узел CSS | text }}

Для одного более короткого фрагмента текста, не содержащего символов, значимых в викикоде (в частности, знаков равенства), вы можете использовать встроенное соглашение о вызовах: величина отступа указывается в первом параметре, а текст, к которому он должен быть применен во втором. Однако для большинства случаев использования настоятельно рекомендуется соглашение о вызовах блоков.

Пример

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Энейский commodo ligula eget dolor. Энейская масса. 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. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.


Cui dōnō lepidum novum libellum arida modo pūmice expolitum

Обратите внимание, что последний абзац не имеет отступа , так как перед ним две новые строки. Это заставляет MediaWiki вставлять
перед ним, что «крадет» отступ.

См. также[править]

  • Политика в отношении отступов параграфов
  • {{висячий отступ}}
  • {{вмятина}}

Bootstrap Text Indent Left Icon

Bootstrap Text Indent Left Icon означает, что если значение отрицательное, первая строка будет иметь отступ влево. Этот значок также известен как «двухтекстовый отступ влево» или «двухтекстовый отступ влево». Значок начальной загрузки Text Indent Left также символизирует нажатие и копирование.

Отступ текста влево Иконка приведена ниже. Вы можете использовать этот значок таким же образом в своем проекте. Сначала убедитесь, что вы добавили библиотеку иконок Bootstrap. Если эта библиотека добавлена, просто добавьте HTML css class text-indent-left к любому элементу, чтобы добавить значок. Отступ текста начальной загрузки влево Значок может быть изменен в соответствии с вашими потребностями. Вы можете управлять размером значка (текстовый отступ слева), используя стиль css размера шрифта.

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

Начальная загрузка Текст значка с отступом влево Значок можно добавить на любую веб-страницу, как показано ниже.

Код значка-

Отступ текста влево Код значка | Настроить цвет

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

Расширенный редактор

Непрозрачность

Обводка

Тень прямоугольника Значок Тень Контуры Формы Заполненные фигуры

Смещение по X

Смещение по Y

Разброс

inset shadow

Reset

X offset

Y offset

Reset

Solid Dotted Dashed Double Groove Ridge inset outset hidden

Padding

Radius

Border

Solid Dotted Dashed Double Groove Ridge inset outset Hidden

Padding

Radius

Stroke

1. Web

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

ИКОН —

Код знака — 

 Текст -индийный левый
.

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

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

Если вы хотите сделать только значок кнопки без текста, добавьте следующий код.
Ссылка на кнопку со значком —

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

bash.,cut.,dent.,depress.,dint., Hollow.,copy,paste,Bootstrap Значок нажатия, значок копирования начальной загрузки

Начальная загрузка Значок текста с отступом влево Значок | отступ текста влево | HTML, CSS

Добавление значка Bootstrap Значок HTML Отступ текста влево ( text-indent-left ) в веб-проекте очень прост. Вам нужно добавить класс значков вместе с bi, это в основном основной класс и обязательный для значков, поэтому не забудьте добавить этот класс. Вы можете настроить отступ текста значка Bootstrap влево. Отступ текста значка слева в соответствии с вашими требованиями, предположим, что вам нужно изменить цвет значка «Отступ текста влево» или изменить размер размера. Довольно просто изменить цвет значка Текстовый отступ слева, просто добавьте, что он сделает цвет шрифта красным. Точно так же вы можете изменить размер значка с отступом влево, просто добавив. Точно так же вы можете добавить цвет границы, тень и другие стили шрифта к отступу текста влево. Надеюсь, эта иконка удовлетворит ваши потребности.

Изменить значок Bootstrap Значок Текст с отступом влево Цвет

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