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

118

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

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

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

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

— Hugolpz
источник

5

Почему бы просто не добавить простой запас.

— Cam

5

Возможно, потому что поля / отступы влияют на весь блок. text-indent был бы лучшим выбором

— хорошая задница

Мне нужно раскрасить левую границу и левое поле для семантического использования :) Я также могу добавить несколько element:before { content:"[a kind of space]"; background: mycolor;}. Во всех смыслах я хотел узнать, как добавить пробелы, это было весело!

— Hugolpz

1

@Hugolpz: Вы могли бы сделать то же самое с p:first-letter { border-left: 1ex solid mycolor; }.

— cHao

@carn поля статичны, ширина пробела зависит от размера шрифта

— не понравилось

248

Вы можете использовать юникод неразрывного пробела:

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

См. Демонстрацию JSfiddle

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

— Hugolpz
источник

2

Я сделал небольшое изменение, чтобы вы могли увидеть его эффект: jsfiddle.net/uMFHH/3 (в противном случае это просто выглядит как поле, что вызывает хороший вопрос, почему бы просто не добавить маржу?)

— Джейсон Сперске,

Потому что мне нужно раскрасить левую границу и левое поле :)

— Hugolpz

3

Почему пробел в конце "\00a0 "? Это необходимо или мы можем просто сделать "\00a0"?

— jbyrd

1

@jbyrd: необязательно (см. jsfiddle.net/nhyw6e9q ). Я оставил это там, чтобы показать, что нормальное пространство не учитывается.

— Hugolpz

40

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

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

p { text-indent: 1em; }

Демо JSFiddle

Редактировать:

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

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

демонстрация

— Chao
источник

2

Если вы застряли в поддержке IE <8, этот метод будет работать, а псевдоэлементы до / после - нет.

— cimmanon

1

@cimmanon: Ага. Согласно MDN, это работает даже в IE 3 (хотя я тогда даже не знал, что у них есть CSS: P).

— cHao

Вы не можете раскрасить отступ таким { text-indent: 1em; }. Но мы можем раскрасить пространство таким :before {content: "\00a0 "; background: #000; }. См. Fiddle

— Hugolpz

1

@Hugolpz: Текстовый отступ? Нет. не могу раскрасить это по-другому, AFAIK. Но граница? Конечно. :)

— cHao

О, мы не можем добавить несколько материалов, см. Fiddle . Жаль ...

— Hugolpz

8

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

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

p {
    margin-left: 10px;
 }

или если вам просто нужен отступ внутри элемента абзаца

p {
    padding-left: 10px;
}

— Matt
источник

6

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

— Piyush
источник