Подтвердить что ты не робот

Как создать совместимый с браузером стиль отступов в CSS в промежутке

Единственное, что я нашел, это:

.hang {
    text-indent: -3em;
    margin-left: 3em;
} 

Единственный способ для этого - поместить текст в абзац, который вызывает эти ужасно неприглядные дополнительные строки. Я бы предпочел просто использовать их в <span class="hang"></span>.

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

4b9b3361

Ответ 1

<span> является встроенным элементом. Термин "висячий отступ" бессмыслен, если вы не говорите об абзаце (что обычно означает элемент блока). Разумеется, вы можете изменить поля на <p> или <div> или любой другой элемент блока, чтобы избавиться от дополнительного вертикального пространства между абзацами.

Вам может понадобиться нечто вроде display: run-in, где тег станет либо блочным, либо встроенным в зависимости от контекста... к сожалению, это еще не универсально поддерживаемых браузерами.

Ответ 2

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

p {
  padding-left: 20px; 
} 

p:first-letter {
  margin-left: -20px;
}

Приятный и простой: D

Если новые строки беспокоят вас в p-блоках, вы можете добавить

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

Пример JSFiddle

Ответ 3

ysth ответ лучше всего с одним спорным исключением; единица измерения должна соответствовать размеру шрифта.

p {
  text-indent: -2en; 
  padding-left: 2en;
}

"3" также будет работать достаточно хорошо; "em" не рекомендуется, так как он шире, чем средний символ в алфавитном наборе. "px" следует использовать только в том случае, если вы планируете выравнивать зависания текстовых блоков с разными размерами шрифтов.