html5htmlcssindentation

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

просмотры: 28.3K

Единственное, что я нашел, было;

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

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

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

Источник

Ответов (3)

Решение

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

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

Источник

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

p {
  padding-left: 20px; 
} 

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

Красиво и просто: D

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

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

Пример JSFiddle

Источник

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

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

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

Источник