Отступ абзаца css: text-indent | htmlbook.ru

Leave a Comment / Css / By /

Организация отступов в верстке (margin/padding) / Хабр

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

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

Основные принципы:

  1. Отступы идут от предыдущего элемента к следующему.
  2. Отступ задается последнему возможному элементу в доме.
  3. Отступы нельзя задавать для независимых элементов ( БЭМ блок ).
  4. У последнего элемента группы, отступ обнуляется (всегда).

Отступы идут от предыдущего элемента к следующему.

margin(ы) задаются от предыдущего элемента к следующему, от первого ко второму, сверху вниз, слева направо.

Это значит.что такие свойства как margin-left и margin-top не используются (не без исключений). С padding все немного наоборот (кроме того, что он используется для, декоративных целей, увеличения области ссылки и т.д.). Когда блоку нужен отступ сверху или слева, он его получает за счет padding-top и padding-left родителя.

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

Отступ задается последнему возможному элементу в доме

margin(ы) задаюся только между соседними элементами дом дерева.

В примере 3 списка, в следующей структуре:

<section>
  <div>
    <div>
      <ul>
        <li><a href="">Далеко-далеко, за словесными.
  </a></li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>
  <div>...</div>
  <div>...</div>
</section>

Не за счет дочерних элементов, а за счет соседних делается отступ.

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

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

<section>
  <h2>headline in a section of seven words</h2>
</section>

Если взять пример с заголовком, и нужно сделать отступ для заголовка сверху. то последний элементом будет section и для него задается padding-top, margin(ы) которые стоят по дефолту всегда нужно обнулять.

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

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

Отступы нельзя задавать для независимых элементов ( БЭМ блок )

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

Если нужно сделать блоку отступ. Без ущерба это делается с помощью:

  • Наследование через элемент (если вытащить этот блок с элемента, отступа не будет, и его можно будет просто разместить в другом месте).
  • Добавление класса (можно сделать блок элементом).
  • Обертка (как блок, у которого роль, только в позиционировании).
.block__item > .block { margin-right: 10px; }
.block.block__item { margin-right: 10px; }
.block-wrap > .block { margin-right: 10px; }

У последнего элемента группы, отступ обнуляется (всегда)

Возьмем для примера список и изображение.

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>
<img src="" alt="">

Это горизонтальное меню и логотип (который почему-то справа).

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

Для последней li отступ обнуляется. И отступ делается между соседними элементами ul и img. О чем говорилось во втором принципе.

Возьмем другой пример:

<aside>
  <div>
    <article>
      <h4>...</h4>
      
      <p>...</p>
      
      <aside>
        <time>10.10.10</time>
      </aside>
    </article>
  </div>
  <div>...</div>
  
  <div>...</div>
</aside>

Интересует нас отступ между новостями, которые задается .blog-preview__item { margin-bottom: 20px; }. Последний margin обнуляется, а нижний отступ делается за счет padding blog-preview. О чем говорилось во втором принципе.

Чаще чем другие псевдоклассы, надо использовать :last-child.

.item:not(:last-child) { 
  margin-bottom: 20px; 
}
// или //
.item {
  // другие стили //
  margin-bottom: 20px; 
  &:last-child {
    margin-bottom: 0;
  }
}
// или margin-top, основная идея здесь, не в направлении маргина, а в отсутствии лишнего //
. item + .item {
  margin-top: 20px;
}
// или //
.item {
  // другие стили //
  & + & {
    margin-top: 20px;
  }
}

Исключения


  • В первую очередь это добавление текстового контента через админку. Здесь отлично справляется подход к отступам заданный браузером. Но этот подход нельзя считать подходящим в обычной верстке как и несколько
    <br>     в коде подряд.

  • «Динамические элементы». Когда элемент появляется после какого-то блока, то он появится со своим отступом.
  • Иногда вертикальные падинги лучше задавать дочерним блокам, нежели всей секции. Если в перспективе, на других страницах в том же месте, это относится ко второму принципу, задавать отступ для последнего возможного, вот иногда секция последний, но не возможный.
  • Отрицательные маргины, auto, padding для контейнера.

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

P. S. Советую ознакомиться с публикацией Кастомный подход для нормализации и сброса стилей (custom-reset.css). И советую использовать css линтеры. И кому интересно, может решить css задачку.

Отступы и единицы em в CSS

Пусть у нас есть следующие теги:

<div> <p> text </p> </div>

Пусть размер шрифта абзаца задан в px:

p { font-size: 20px; }

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

p { font-size: 20px; margin: 2em; /* соответствует 40px */ }

Пусть теперь абзацу задан размер в em:

div { font-size: 20px; } p { font-size: 2em; /* соответствует 40px */ }

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

div { font-size: 20px; } p { font-size: 2em; /* соответствует 40px */ margin: 2em; /* соответствует 80px */ }

Пусть у нас есть HTML код, для которого мы будем решать задачи:

<section> <div> <p> text </p> </div> </section>

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

section { font-size: 10px; } div { font-size: 2em; margin: 2em; }

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

section { font-size: 10px; } div { font-size: 2em; margin: 3em; }

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

section { font-size: 10px; } div { font-size: 2em; margin: 0.

5em; }

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

section { font-size: 10px; } div { font-size: 2em; } p { font-size: 2em; margin: 2em; }

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

section { font-size: 10px; } div { font-size: 1.5em; } p { font-size: 1em; margin: 1.5em; }

CSS: text-indent ― Справочник и примеры

Дневник стека

Для разработчиков, дизайнеров и производителей.

Поиск

Свойство text-indent устанавливает значение отступа первой строки блока текста (например, для абзаца).

Стиль текста

Начальное значение 0
Относится к Блочные элементы
Наследование да
Анимация длина и проценты значения, вычисление()

Отступ текста 9Свойство 0019 задает ширину отступа, который будет вставлен в первой строке текста.

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

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

Значение по умолчанию — 0 , поэтому отступ не произойдет, если значение не будет изменено.

Синтаксис

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

 /* значения длины */
отступ текста: 2 мм;
отступ текста: 25px;
/* процентное значение относительно ширины блочного контейнера */
отступ текста: 10%;
/* Значения ключевых слов */
отступ текста: 4em в каждой строке;
отступ текста: 4em висит;
отступ текста: 4em в каждой строке;
/* Глобальные значения */
текстовый отступ: наследовать;
отступ текста: начальный;
отступ текста: не установлен;

Описание
значение что он делает
длина CSS Задает размер отступа в единицах измерения (px, pt, cm, em, em). Значение по умолчанию: 0.
Допускаются отрицательные значения; однако первая строка будет иметь отступ слева.
% Указывает размер отступа в процентах.
Допускаются отрицательные значения; однако первая строка будет иметь отступ слева.
начальный Устанавливает для свойства значение по умолчанию.
наследовать Указывает, что значение наследуется от родительского элемента.

Пример

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

© 2023 Stack Diary - Все права защищены.

отступ текста | Коддропы

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

Объем пространства определяется относительно левого края (или правого края в макетах справа налево) блочного элемента, содержащего текст. Направление текста определяется свойством direction .

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

Поскольку свойство text-indent каскадно, при указании на блочном элементе оно повлияет на дочерние встроенные блочные элементы. По этой причине часто целесообразно указывать text-indent: 0 для элементов, которые указаны display: inline-block .

Общая информация и заметки

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

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

п {
  нижняя граница: 0;
}

/* Селектор соседних элементов используется для выбора всех абзацев, следующих непосредственно за абзацем */
р + р {
  отступ текста: 1.5em;
  поле сверху: 0;
}

Свойство text-indent также используется в методах замены изображения, чтобы скрыть текст (в основном заголовки) и показать графическое представление этого текста на его месте. Вы можете прочитать больше о методах замены изображений в статье «Девять методов замены изображений CSS на CSS-трюках».

Значения

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

Примечания

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

Библиографии обычно пишутся с использованием висячих отступов, где первая строка доходит до левого поля, а остальная часть статьи имеет отступ. В последнее время такого рода вещи также называют «аутдентом». Пример висячего отступа можно увидеть на следующем изображении:

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *