Отступ текста css слева: margin-left — CSS | MDN

Стили CSS

 раздел {
  фон: голубой;
}

.px-значение {
  отступ текста: 40px; /* Отступ первой строки на 40 пикселей */
}

.отрицательное значение {
  отступ текста: -1em; /* Отрицательное значение отступает от первой строки на 1em */
}

.процентное значение {
  отступ текста: 10%; /* Отступ первой строки на 10% от ширины содержащего блока */
}
 

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

Отрицательное значение -1em приводит к выступу, перемещая первую строку на 1em влево от начального края блока . Это дает эффект того, что первая строка «свисает» с содержащего блока.

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

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

Значения

Свойство text-indent принимает следующие значения:

Значение	Описание
<длина>	Отступ определяется абсолютной длиной (например, пкс). Может быть отрицательным. Значение по умолчанию: 0,9.0076
<процент>	Отступ определяется в процентах от ширины содержащего блока.
каждая строка	Первая строка и строки после принудительных разрывов имеют отступ.
висячий	Делает отступы первой строки блочного контейнера и любой строки, которая следует за принудительным разрывом строки.

Ассоциированные объекты

• text-align
• text-justify
• text-overflow
• text-transform
• text-decoration (с соответствующими свойствами из модуля оформления текста CSS)
• висящая пунктуация

Советы и рекомендации

• Свойство text-indent является наследуемым, поэтому, если оно указано для элемента уровня блока, оно может повлиять на дочерние элементы встроенного блока. Чтобы этого не произошло, укажите text-indent: 0 для элементов с дисплеем : inline-block .

• Правильное использование text-indent может улучшить читаемость, особенно в больших блоках текста.

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

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

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

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

Предостережение . Ранние версии Edge использовали EdgeHTML, что приводило к несоответствию номеров версий. Начиная с версии 79, Edge использует Chromium с соответствующими номерами версий.

Полезные ресурсы

Могу ли я использовать: text-indent

Рабочий проект текстового модуля CSS Уровень 3: text-indent

Висячие отступы

Есть вопросы? Обсудите это руководство по HTML5/JavaScript с другими на форумы.

По умолчанию, когда строки переносятся, они просто шлепаются прямо под тем местом, откуда началась предыдущая строка. Взгляните на заголовок # Really Tied the Room Together в следующем примере, чтобы увидеть это поведение по умолчанию в действии:

Во многих случаях такое поведение переноса является именно тем, что нам нужно. Мы бы никогда не подумали иначе. Ну… никогда не совсем точно. Могут быть случаи, когда вы и я на самом деле хотели бы, чтобы переносимые строки имели фиксированный отступ:

В случае нашего заголовка мы хотим, чтобы символ # был визуально отделен от остальной части text, поэтому последующие строки имеют отступ при переносе. Для этого типа отступа есть название, при котором все строки, кроме первой, имеют отступ. Этот тип отступа известен как висячий отступ 9.0032 .

Другой распространенный пример этого типа отступа связан с цитатами:

Многие форматы цитат требуют, чтобы вторая (и последующие строки) были с отступом, а первая строка была выровнена по левому полю.

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

Вперёд!

Реализация висячих отступов

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

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

Поначалу это может показаться немного странным, но мы сдвинем все назад вправо от начальной позиции нашей строки, используя свойство padding-left: . Нам просто пришлось использовать некоторые хитрости CSS, чтобы получить точный эффект, играя со свойствами text-indent и padding-left.

Простой пример

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

 

<голова>
  
  
  <стиль>
    тело {
      цвет фона: #FFDA45;
      поле: 15 пикселей;
      семейство шрифтов: без засечек;
    }
    #контейнер {
      поле: 0 авто;
      максимальная ширина: 500 пикселей;
    }
    #контейнер р {
      верхняя граница: сплошная 4 пикселя #846A00;
      маржа: 0;
      padding-top: 15px;
      размер шрифта: 1.4em;
      вес шрифта: 100;
      высота строки: 1,6 em;
    }
    # контейнер h2 span {
      цвет: #CC0000;
    }
  

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