Как создать полностью совместимый с браузером стиль отступа в CSS в диапазоне - PullRequest
Новая
       88

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

30 голосов
/ 15 августа 2008

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

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

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

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

Ответы [ 3 ]

15 голосов
/ 15 августа 2008

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

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

9 голосов
/ 11 ноября 2011

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

p {
  padding-left: 20px; 
} 

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

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

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

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

Пример JSFiddle

3 голосов
/ 29 апреля 2015

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

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

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

...