CSS: element içeriğinden önce beyaz boşluk nasıl eklenir?

118

Aşağıdaki kodların hiçbiri çalışmaz:

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

Öğenin içeriğinden önce beyaz boşluk nasıl eklerim?

Not: Anlamsal kullanım için sol kenar ve sol kenar boşluğunu renklendirmem ve alanı renksiz kenar boşluğu olarak kullanmam gerekiyor. :)

— Hugolpz
kaynak

5

Neden sadece basit bir marj eklemiyorsunuz?

— Cam

5

Belki de kenar boşluğu / dolgu tüm bloğu etkilediği için. text-indent daha iyi bir seçim olurdu

— nice ass

Anlamsal kullanım için border-left ve margin-left'i renklendirmem gerekiyor :) Birkaç tane de ekleyebilirim element:before { content:"[a kind of space]"; background: mycolor;}. Boşluk eklemenin bir yolunu bilmek istediğim tüm yollar, biraz eğlenceli!

— Hugolpz

1

@Hugolpz: Temelde aynı şeyi yapabilirsiniz p:first-letter { border-left: 1ex solid mycolor; }.

— cHao

@carn marjları yazı boyutuna bağlıdır genişlik statik, uzay vardır

— Değil sevilen

248

Bölünemez bir boşluğun unicode'unu kullanabilirsiniz:

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

JSfiddle demosuna bakın

[@ Jason Sperske tarafından geliştirilen stil]

— Hugolpz
kaynak

2

Etkisini görebilmeniz için küçük bir düzenleme yaptım: jsfiddle.net/uMFHH/3 (aksi halde sadece bir kenar boşluğu gibi görünüyor, bu iyi bir soru getiriyor, neden sadece bir kenar boşluğu

— eklemiyorsunuz

Çünkü sol kenar ve sol kenar boşluğunu renklendirmem gerekiyor :)

— Hugolpz

3

Neden sonundaki boşluk "\00a0 "? Bu gerekli "\00a0"mi yoksa sadece yapabilir miyiz ?

— jbyrd

1

@jbyrd: gerekli değil (bkz. jsfiddle.net/nhyw6e9q ). Normal alanın hesaba katılmadığını göstermek için oraya bıraktım.

— Hugolpz

40

Boşluk ekleyerek etrafta osurma. Birincisi, IE'nin eski sürümleri neden bahsettiğinizi anlamayacak. Bunun yanı sıra, genel olarak daha temiz yöntemler var.

Renksiz girintiler için text-indentözelliği kullanın .

p { text-indent: 1em; }

JSFiddle demosu

Düzenle:

Boşluğun renkli olmasını istiyorsanız, ilk harfe kalın bir sol kenarlık eklemeyi düşünebilirsiniz. (Neredeyse-ama-pek değil-"onun yerine" derdim, çünkü her ikisini de kullanırsanız girinti bir sorun olabilir. Ancak, girintilemek için yalnızca sınıra güvenmek bana kirli geliyor.) Ne kadar uzakta olduğunu belirtebilirsiniz ve ne kadar geniş, rengin ilk harfin sol kenar boşluğunu / dolgusunu / kenarlık genişliğini kullandığı.

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

gösteri

— Chao
kaynak

2

IE <8'i desteklemek için takılırsanız, bu yöntem işe yarayacaktır ancak sözde elemanlardan önce / sonra çalışmayacaktır.

— cimmanon

1

@cimmanon: Evet. MDN'ye göre, bu IE 3'te bile işe yarıyor (gerçi o zamanlar CSS'lerinin olduğunu bile bilmiyordum : P).

— cHao

Böyle bir girintiyi renklendiremezsiniz { text-indent: 1em; }. Ama bir alanı böyle renklendirebiliriz :before {content: "\00a0 "; background: #000; }. Bkz Fiddle

— Hugolpz

1

@Hugolpz: Bir metin girintisi mi? Hayır! o kadar farklı renklendiremez, AFAIK. Ama bir sınır? Elbette. :)

— cHao

Oh, birkaç içerik ekleyemiyoruz, bkz. Fiddle . Çok kötü ...

— Hugolpz

8

Öğeler arasına boşluk eklemek istediğinizden, sol kenar boşluğu veya sol dolgu gibi basit bir şeye ihtiyacınız olabilir. İşte hem http://jsfiddle.net/BGHqn/3/ örnekleri.

Bu, paragraf öğesinin soluna 10 piksel ekleyecektir

p {
    margin-left: 10px;
 }

veya sadece paragraf öğenizin içinde biraz dolgu istiyorsanız

p {
    padding-left: 10px;
}

— Mat
kaynak

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
kaynak