CSS: cách thêm khoảng trắng trước nội dung của phần tử?

Question

Không ai trong số các mã sau hoạt động:

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

Làm thế nào để thêm khoảng trắng trước khi nội dung phần tử?

Lưu ý: Tôi cần tô màu đường viền trái và lề trái để sử dụng ngữ nghĩa và sử dụng khoảng trắng làm lề không màu. :)

Answer 1

Bạn có thể dùng unicode của một không gian phá vỡ không:

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

Xem JSfiddle demo

[phong cách cải thiện bằng cách @ Jason Sperske]

Answer 2

Đừng xì hơi xung quanh với chèn dấu cách. Đối với một, phiên bản cũ của IE sẽ không biết những gì bạn đang nói về. Bên cạnh đó, mặc dù, có những cách sạch hơn nói chung.

Đối với các thụt lề không màu, sử dụng thuộc tính text-indent.

p { text-indent: 1em; } 

JSFiddle demo

Edit:

Nếu bạn muốn không gian để được tô màu, bạn có thể cân nhắc thêm một biên giới dày trái để chữ cái đầu tiên. (Tôi gần như-nhưng-không-khá nói "thay vì", bởi vì thụt lề có thể là một vấn đề nếu bạn sử dụng cả hai. Nhưng nó cảm thấy bẩn với tôi để chỉ dựa vào biên giới thụt lề.) Bạn có thể chỉ định cách xa và độ rộng, màu sắc đang sử dụng lề trái/lề/lề của chữ cái đầu tiên.

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

Demo

Answer 3

Vì bạn đang tìm kiếm thêm không gian giữa các yếu tố bạn có thể cần một cái gì đó đơn giản như một margin-left hoặc padding-left. Dưới đây là ví dụ về cả http://jsfiddle.net/BGHqn/3/

này sẽ bổ sung thêm 10 pixel ở phía bên trái của phần tử đoạn

p { 
    margin-left: 10px; 
} 

hoặc nếu bạn chỉ muốn một số padding trong yếu tố đoạn bạn

p { 
    padding-left: 10px; 
}