CSS: làm thế nào để thêm khoảng trắng trước nội dung của phần tử?

118

Không có đoạn mã nào sau đây hoạt động:

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

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

Lưu ý: Tôi cần tô màu cho 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. :)

— Hugolpz
nguồn

5

Tại sao không chỉ thêm lề đơn giản.

— Cam

5

Có thể vì lề / phần đệm ảnh hưởng đến toàn bộ khối. văn bản thụt lề sẽ là một lựa chọn tốt hơn

— ass tốt đẹp

Tôi cần tô màu viền trái và lề trái để sử dụng ngữ nghĩa :) Tôi cũng có thể thêm một số element:before { content:"[a kind of space]"; background: mycolor;}. Tất cả các cách tôi muốn biết một cách để thêm không gian, thật vui!

— Hugolpz

1

@Hugolpz: Về cơ bản bạn có thể làm điều tương tự với p:first-letter { border-left: 1ex solid mycolor; }.

— cHao

Lề @carn là tĩnh, chiều rộng không gian tương đối với kích thước phông chữ

— Không được yêu thích vào

248

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

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

Xem bản demo của JSfiddle

[phong cách được cải thiện bởi @Jason Sperske]

— Hugolpz
nguồn

2

Tôi đã thực hiện một chỉnh sửa nhỏ để bạn có thể thấy hiệu ứng của nó: jsfiddle.net/uMFHH/3 (nếu không nó trông giống như một lề, điều này đưa ra một câu hỏi hay, tại sao không thêm một lề?)

— Jason Sperske

Bởi vì tôi cần tô màu cho viền trái và lề trái :)

— Hugolpz

3

Tại sao không gian ở cuối "\00a0 "? Điều đó là cần thiết hay chúng ta chỉ có thể làm "\00a0"?

— jbyrd

1

@jbyrd: không cần thiết (xem jsfiddle.net/nhyw6e9q ). Tôi để nó ở đó để chỉ ra rằng không gian bình thường không được tính đến.

— Hugolpz

40

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

Đối với vết lõm không màu, sử dụng text-indenttài sản.

p { text-indent: 1em; }

Bản demo của JSFiddle

Biên tập:

Nếu bạn muốn không gian được tô màu, bạn có thể xem xét thêm một viền trái dày vào chữ cái đầu tiên. (Tôi gần như không nói "thay vào đó", bởi vì thụt lề có thể là một vấn đề nếu bạn sử dụng cả hai. Nhưng tôi cảm thấy bẩn khi chỉ dựa vào đường viền để thụt lề.) Bạn có thể chỉ định khoảng cách bao xa và rộng bao nhiêu, màu sắc đang sử dụng lề trái / phần đệm / chiều rộng đường viền bên trái của chữ cái đầu tiên.

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

Bản giới thiệu

— cHao
nguồn

2

Nếu bạn bị kẹt hỗ trợ IE <8, phương pháp này sẽ hoạt động trong khi trước / sau các phần tử giả sẽ không hoạt động.

— cimmanon

1

@cimmanon: Đúng. Theo MDN, điều này hoạt động ngay cả trong IE 3 (mặc dù tôi thậm chí không nhận ra rằng họ đã có CSS trước đó: P).

— cHao

Bạn không thể tô màu một vết lõm như vậy { text-indent: 1em; }. Nhưng chúng ta có thể tô màu một không gian như vậy :before {content: "\00a0 "; background: #000; }. Xem Fiddle

— Hugolpz

1

@Hugolpz: Một văn bản thụt lề? Không. không thể tô màu khác nhau, AFAIK. Nhưng một biên giới? Chắc chắn rồi. :)

— cHao

Ồ, chúng tôi không thể thêm một số nội dung, xem Fiddle . Quá tệ ...

— Hugolpz

8

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ư lề trái hoặc đệm trái. Dưới đây là ví dụ về cả http://jsfiddle.net/BGHqn/3/

Điều này sẽ thêm 10 pixel ở 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ố phần đệm trong phần tử đoạn văn của bạn

p {
    padding-left: 10px;
}

— Matt
nguồn

5

/* 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
nguồn