CSS: como adicionar espaço em branco antes do conteúdo do elemento?

118

Nenhum dos códigos a seguir funciona:

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

Como adiciono espaço em branco antes do conteúdo do elemento?

Observação: preciso colorir a borda esquerda e a margem esquerda para uso semântico e usar o espaço como margem incolor. :)

— Hugolpz
fonte

5

Por que não apenas adicionar margem simples.

— Câmera de

5

Talvez porque a margem / preenchimento afeta o bloco inteiro. text-indent seria uma escolha melhor

— nice ass

Preciso colorir a borda esquerda e a margem esquerda para uso semântico :) Posso adicionar vários element:before { content:"[a kind of space]"; background: mycolor;}também. De todas as maneiras, eu queria saber uma maneira de adicionar espaços, meio divertido!

— Hugolpz

1

@Hugolpz: Você poderia fazer basicamente a mesma coisa com p:first-letter { border-left: 1ex solid mycolor; }.

— cHao

margens @carn são estáticos, espaço largura é em relação ao tamanho da fonte

— Não amou

248

Você pode usar o Unicode de um espaço sem quebra:

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

Veja a demonstração JSfiddle

[estilo melhorado por @Jason Sperske]

— Hugolpz
fonte

2

Fiz uma pequena edição para que você pudesse ver seu efeito: jsfiddle.net/uMFHH/3 (caso contrário, parece apenas uma margem, o que traz uma boa pergunta, por que não adicionar apenas uma margem?)

— Jason Sperske

Porque preciso colorir a borda esquerda e a margem esquerda :)

— Hugolpz

3

Por que o espaço no final de "\00a0 "? Isso é necessário ou podemos apenas fazer "\00a0"?

— jbyrd

1

@jbyrd: não necessário (consulte jsfiddle.net/nhyw6e9q ). Deixei lá para mostrar que o espaço normal não é contabilizado.

— Hugolpz

40

Não se preocupe com a inserção de espaços. Por um lado, as versões mais antigas do IE não saberão do que você está falando. Além disso, porém, existem formas mais limpas em geral.

Para recuos incolores, use a text-indentpropriedade.

p { text-indent: 1em; }

JSFiddle demo

Editar:

Se quiser que o espaço seja colorido, você pode adicionar uma borda esquerda grossa à primeira letra. (Eu diria quase-mas-não-diria "em vez", porque o recuo pode ser um problema se você usar ambos. Mas parece sujo para mim confiar apenas na borda para recuar.) Você pode especificar a distância e a largura da cor usando a margem esquerda / preenchimento / largura da borda da primeira letra.

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

Demo

— cHao
fonte

2

Se você não tiver suporte para o IE <8, esse método funcionará, enquanto os pseudoelementos antes / depois não.

— cimmanon

1

@cimmanon: Sim. De acordo com o MDN, isso funciona até no IE 3 (embora eu nem percebesse que eles tinham CSS na época: P).

— cHao de

Você não pode colorir um recuo assim { text-indent: 1em; }. Mas podemos colorir um espaço assim :before {content: "\00a0 "; background: #000; }. Veja Fiddle

— Hugolpz

1

@Hugolpz: Um recuo de texto? Não. não posso colorir de forma tão diferente, AFAIK. Mas uma fronteira? Certo. :)

— cHao

Oh, não podemos adicionar vários conteúdos, consulte Fiddle . Que pena ...

— Hugolpz

8

Como você está procurando adicionar espaço entre os elementos, pode precisar de algo tão simples como margin-left ou padding-left. Aqui estão alguns exemplos de http://jsfiddle.net/BGHqn/3/

Isso adicionará 10 pixels à esquerda do elemento do parágrafo

p {
    margin-left: 10px;
 }

ou se você quiser apenas algum preenchimento dentro do seu elemento de parágrafo

p {
    padding-left: 10px;
}

— Matt
fonte

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
fonte