Как создать совместимый со всеми браузерами стиль подвесного отступа в CSS в span
Единственное, что я нашел;
.hang {
text-indent: -3em;
margin-left: 3em;
} Единственный способ сделать это - поместить текст в абзац, что приводит к ужасно неприглядным дополнительным строкам. Я бы предпочел просто поместить их в <span class="hang" ></span>.
Я также ищу способ более глубокого отступа, чем просто одноуровневый отступ. Использование абзацев для суммирования отступов не работает.
<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;
}
Ответ ysth' является лучшим за одним спорным исключением: единица измерения должна соответствовать размеру шрифта.
p {
text-indent: -2en;
padding-left: 2en;
}"3" также будет работать адекватно; "em" не рекомендуется, так как он шире, чем средний символ в алфавитном наборе. "px" следует использовать только в том случае, если вы собираетесь выравнивать навески текстовых блоков с разным размером шрифта.
