CSS: как добавить пробел перед содержимым элемента?

Ни один из следующих кодов не работает:

p:before { content: " "; }
p:before { content: "&nbsp;"; }

Как добавить пробел перед содержимым элемента?

Примечание. Мне нужно покрасить границу слева и маржу слева для семантического использования и использовать пространство в качестве бесцветного поля.:)

Ответ 1

Вы можете использовать unicode без разрыва:

p:before { content: "\00a0 "; }

См. JSfiddle demo

[стиль улучшен byJJason Sperske]

Ответ 2

Не путайте с вставкой пробелов. Например, более старые версии IE не будут знать, о чем вы говорите. Кроме того, однако, есть более чистые способы в целом.

Для бесцветных отступов используйте свойство text-indent.

p { text-indent: 1em; }

JSFiddle демо

Edit:

Если вы хотите, чтобы пространство было окрашено, вы можете подумать о добавлении толстой левой границы к первой букве. (Я бы почти, но не совсем сказал "вместо этого", потому что отступ может быть проблемой, если вы используете оба. Но мне кажется, что мне неловко полагаться исключительно на границу с отступом.) Вы можете указать, как далеко, и насколько широка, цвет использует левое поле слева/ширину поля/ширину.

p:first-letter { border-left: 1em solid red; }

Демо

Ответ 3

Поскольку вы ищете добавление пространства между элементами, вам может понадобиться что-то такое же простое, как маржа-левое или padding-left. Вот примеры как http://jsfiddle.net/BGHqn/3/

Это добавит 10 пикселей слева от элемента абзаца

p {
    margin-left: 10px;
 }

или если вы просто хотите добавить дополнение в свой элемент абзаца

p {
    padding-left: 10px;
}