CSS: bagaimana cara menambahkan spasi sebelum konten elemen?

118

Tak satu pun dari kode berikut berfungsi: 

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

Bagaimana cara menambahkan spasi sebelum konten elemen?

Catatan: Saya perlu mewarnai tepi kiri dan tepi kiri untuk penggunaan semantik dan menggunakan spasi sebagai margin tanpa warna. :)

css unicode space css-content Hugolpz
sumber
5
Mengapa tidak menambahkan margin sederhana saja.
Cam
5
Mungkin karena margin / padding mempengaruhi seluruh blok. teks-indentasi akan menjadi pilihan yang lebih baik
nice ass
Saya perlu mewarnai border-left dan margin-left untuk penggunaan semantik :) Saya juga bisa menambahkan beberapa element:before { content:"[a kind of space]"; background: mycolor;}. Semua cara saya ingin tahu cara menambah spasi, menyenangkan!
Hugolpz
1
@Hugolpz: Pada dasarnya Anda dapat melakukan hal yang sama dengan p:first-letter { border-left: 1ex solid mycolor; }.
cHao
@carn margin statis, lebar spasi relatif terhadap ukuran font
Tidak dicintai

Jawaban:

248

Anda dapat menggunakan unicode dari ruang tanpa putus:

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

Lihat demo JSfiddle

[gaya ditingkatkan oleh @Jason Sperske]

Hugolpz
sumber
2
Saya membuat sedikit pengeditan sehingga Anda dapat melihat efeknya: jsfiddle.net/uMFHH/3 (jika tidak, tampilannya hanya seperti margin, yang memunculkan pertanyaan bagus, mengapa tidak menambahkan margin saja?)
Jason Sperske
Karena saya perlu mewarnai perbatasan-kiri dan margin-kiri :)
Hugolpz
3
Mengapa ruang di akhir "\00a0 "? Apakah itu perlu atau bisa kita lakukan "\00a0"?
jbyrd
1
@jbyrd: tidak perlu (lihat jsfiddle.net/nhyw6e9q ). Saya meninggalkannya di sana untuk menunjukkan bahwa ruang normal tidak diperhitungkan.
Hugolpz
40

Jangan kentut dengan memasukkan spasi. Pertama, versi IE yang lebih lama tidak akan tahu apa yang Anda bicarakan. Selain itu, ada cara yang lebih bersih secara umum.

Untuk indentasi tidak berwarna, gunakan text-indentproperti.

p { text-indent: 1em; }

Demo JSFiddle

Edit:

Jika Anda ingin ruang diberi warna, Anda dapat mempertimbangkan untuk menambahkan batas kiri yang tebal ke huruf pertama. (Saya hampir-tetapi-tidak-cukup mengatakan "sebagai gantinya", karena indentasi dapat menjadi masalah jika Anda menggunakan keduanya. Tetapi bagi saya rasanya kotor jika hanya mengandalkan batas untuk membuat indentasi.) Anda dapat menentukan seberapa jauh , dan seberapa lebarnya, warna menggunakan margin kiri / padding / lebar batas huruf pertama.

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

Demo

cHao
sumber
2
Jika Anda terjebak mendukung IE <8, metode ini akan bekerja sementara elemen semu sebelum / sesudah tidak.
cimmanon
1
@cimon: Ya. Menurut MDN, ini berfungsi bahkan di IE 3 (meskipun saya bahkan tidak menyadari mereka memiliki CSS saat itu: P).
cHao
Anda tidak dapat mewarnai lekukan seperti itu { text-indent: 1em; }. Tapi kita bisa mewarnai ruang seperti itu :before {content: "\00a0 "; background: #000; }. Lihat Fiddle
Hugolpz
1
@Hugolpz: Sebuah indentasi teks? Nggak. tidak bisa mewarnainya secara berbeda, AFAIK. Tapi perbatasan? Tentu. :)
cHao
Oh, kami tidak dapat menambahkan beberapa konten, lihat Biola . Sayang sekali ...
Hugolpz
8

Karena Anda ingin menambahkan spasi antar elemen, Anda mungkin memerlukan sesuatu yang sederhana seperti margin-left atau padding-left. Berikut adalah contoh dari keduanya http://jsfiddle.net/BGHqn/3/

Ini akan menambah 10 piksel di sebelah kiri elemen paragraf

p {
    margin-left: 10px;
 }

atau jika Anda hanya ingin beberapa padding dalam elemen paragraf Anda

p {
    padding-left: 10px;
}
Matt
sumber
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
sumber