CSS: how to add space before element content?

Question

None of the following codes work:

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

How to add a space before the contents of an element?

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

Answer 1

You can use unicode without breaking:

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

See JSfiddle demo

[style enhanced byJJason Sperske]

Answer 2

Do not confuse with spaces. For example, older versions of IE will not know what you're talking about. In addition, however, there are cleaner methods in general.

For colorless indents, use the text-indent property.

 p { text-indent: 1em; } 

Jsfiddle demo

Edit:

If you want the space to be colored, you might consider adding a thick left border to the first letter. (I would almost, but not quite say “instead,” because indentation can be a problem if you use both. But it seems to me that it’s embarrassing to rely solely on the indented border.) You can specify how far and how far wide, color uses left margin on left / margin / width.

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

Demo

Answer 3

Since you are looking to add space between elements, you may need something as simple as margin-left or padding-left. Here are examples like 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 to add an addendum to your paragraph element

 p { padding-left: 10px; }