How can I add white space before an element's content using CSS?

Question

None of the following code works:

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

How do I add white space before an element's content?

Note: I need to color the border-left and the margin-left for semantic use and use the space as a colorless margin. :)

Allay

Why not just add simple margin. – Episcopate

Maybe because margin / padding affects whole block. text-indent would be a better choice – Kornher

I need to color the border-left and the margin-left for semantic use :) I may add several element:before { content:"[a kind of space]"; background: mycolor;} as well. All ways I wanted to know a way to add spaces, kinda fun! – Allay

@Hugolpz: You could do basically the same thing with p:first-letter { border-left: 1ex solid mycolor; }. – Kingsbury

@carn margins are static, space width is relative to font size – Valuate

Answer 1

You can use the Unicode code point of a non-breaking space:

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

See JSfiddle demo (style improved by Jason Sperske).

Allay

I made a slight edit so you can see it's effect: jsfiddle.net/uMFHH/3 (otherwise it just looks like a margin, which brings up a good question, why not just add a margin?) – Laveta

Because I need to color the border-left and the margin-left :) – Allay

Why the space at the end of "\00a0 "? Is that necessary or can we just do "\00a0"? – Hong

@jbyrd: not neccessary (see jsfiddle.net/nhyw6e9q ). I left it there to show that normal space are not accounted for. – Allay

Answer 2

Don't fart around with inserting spaces. For one, older versions of IE won't know what you're talking about. Besides that, though, there are cleaner ways in general.

For colorless indents, use the text-indent property.

p { text-indent: 1em; }

JSFiddle demo

If you want the space to be colored, you might consider adding a thick left border to the first letter. (I'd almost-but-not-quite say "instead", because the indent can be an issue if you use both. But it feels dirty to me to rely solely on the border to indent.) You can specify how far away, and how wide, the color is using the first letter's left margin/padding/border width.

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

Demo

Kingsbury

If you're stuck supporting IE<8, this method will work while before/after pseudo elements will not. – Sincerity

@cimmanon: Yep. According to MDN, this works even in IE 3 (though i didn't even realize they had CSS back then :P). – Kingsbury

You cannot color an indentation such { text-indent: 1em; }. But we can color a space such :before {content: "\00a0 "; background: #000; }. See Fiddle – Allay

@Hugolpz: A text-indent? Nope. can't color that differently, AFAIK. But a border? Sure. :) – Kingsbury

Oh, we cannot add several content, see Fiddle. Too bad... – Allay

Yeah...:before basically picks the imaginary element that precedes a real element. If you say p:before twice, you select that same pseudo-element both times. – Kingsbury

This :first-letter {border-left: } is witty! +1 – Allay

I was going to say that in my situation I can not use the padding, but I thought about it a little and then figured out how to do it, such a better solution, for MY situation anyway. – Sully

Answer 3

/* Most accurate setting if you only want
   to do this with a CSS pseudo element */
p:before { 
    content: "\00a0";
    padding-right: 5px; /* If you need more space between contents */
}

Tubuliflorous

Answer 4

Since you are looking for adding space between elements, you may need something as simple as a margin-left or padding-left. Here are examples of both (http://jsfiddle.net/BGHqn/3/):

This will add 10 pixels to the left of the paragraph element

p {
    margin-left: 10px;
}

or if you just want some padding within your paragraph element

p {
    padding-left: 10px;
}

Communicative