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

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

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

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

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

3 ответа

  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» следует использовать только в том случае, если вы намереваетесь выровнять зависания текстовых блоков с различными размерами шрифта.