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

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

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

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

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

4 88
css unicode diskspace css-content

4 ответа:

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

p:before { content: "a0 "; }

посмотреть демо JSfiddle

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

191

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

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

p { text-indent: 1em; }

демо JSFiddle

Edit:

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

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

демо

31

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

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

p {
    margin-left: 10px;
 }

или если вы просто хотите, чтобы некоторые отступы в абзаце элемент

p {
    padding-left: 10px;
}
7
/* Most Accurate Setting if you only want
   to do this with CSS Pseudo Element */
p:before { 
   content: "a0";
   padding-right: 5px; /* If you need more space b/w contents */
}
1