Adicione espaço entre os elementos HTML apenas usando CSS

105

Tenho vários elementos HTML idênticos, um após o outro:

<span>1</span>
<span>2</span>
<span>3</span>

Estou procurando a melhor maneira de adicionar espaço ENTRE os elementos usando apenas CSS

[no space]  [1]  [space 10px]  [2]  [space 10px]  [3]  [no space]

Além disso:

  • Anote a compatibilidade do navegador dos seus recibos

ATUALIZAR

Parece que não estava claro. Não quero usar QUALQUER MARCAÇÃO HTML ADICIONAL, como

<span></span>  <span></span>  <span class="last_span"></span>

Não quero usar tabelas

Quero que o primeiro e o último período sejam direcionados automaticamente por CSS

Não quero usar javascript

Requisito opcional: o último período não pode ser ÚLTIMO FILHO da tag pai, mas será o ÚLTIMO SPAN da tag pai. Os spans não têm nenhuma outra tag entre eles.

Dan
fonte
Talvez você deva considerar o uso de uma mesa. Depende de quais dados vão para otext
Madara's Ghost
O número de spans é variável?
trinta dias
O último recurso @Truth deve ser tabelas.
Tim Joyce
Os spanelementos são gerados pelo serviço da web ao qual não tenho acesso. Portanto, não posso alterar a marcação. No entanto, posso usar totalmente o CSS
Dan
Com perguntas como essa, você deve sempre especificar o suporte ao navegador de que necessita. "Preciso de suporte para o IE7" receberá respostas completamente diferentes para "Estou usando apenas o Chrome".
trinta dias

Respostas:

244

Uma boa maneira de fazer isso é:

span + span {
    margin-left: 10px;
}

Cada spanprecedido por um span(portanto, todos spanexceto o primeiro) terá margin-left: 10px.

Aqui está uma resposta mais detalhada para uma pergunta semelhante: Separadores entre elementos sem hacks

trinta pontos
fonte
10
Esta é uma boa solução, embora se seu contêiner se estender por várias linhas, ela falhará.
Savas Vedova
Também funciona com classes, como este:.sidebar-img + .sidebar-text { margin-left: 40px; }
parsecer 28/10/18
2
Como você lida com quando os itens passam para a próxima linha?
thdoan
@thdoan: Depende do seu layout, etc. Você pode tentar algo como isso .
thirtydot de
1
Eu prefiro a solução do reddtoric usando grade e grade-gap.
Alex Salomon
28

Basta usar margem ou preenchimento.

No seu caso específico, você poderia usar margin:0 10pxapenas no 2º <span>.

ATUALIZAR

Aqui está uma boa solução CSS3 ( jsFiddle ):

span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

Elemento de seleção avançada usando seletores gosto :nth-child(), :last-child, :first-of-type, etc. é suportado desde que o Internet Explorer 9.

Simone
fonte
Você tem uma ótima resposta, Simone, mas poderia resolver a questão sem especificar a última spanmanualmente? Este deve ser o trabalho do CSS
Dan
Um pequeno esclarecimento para os downvoters: a resposta de @ thirtydot é incrível e eu gosto muito dela, mas produz um adicional margin-leftsobre o último span, que não é exatamente o que o OP queria.
Simone
este é um hack não marcado, que é a propriedade "espaçamento entre palavras" para: w3schools.com/cssref/pr_text_word-spacing.asp verifique a resposta de Ben
arieljuod
o OP queria espaço entre os spans, então está tudo bem em dar uma solução para elementos inline, as propriedades margin / padding / first / last não são necessárias aqui e apenas adicionam complexidade
arieljuod
Na verdade, o OP disse que usará spans e divs (que são elementos de bloco). Sua solução é válida de qualquer maneira se você definir divs como elementos inline ...
Simone
16

adicione essas regras ao contêiner pai:

display: grid
grid-auto-flow: column
grid-column-gap: 10px

Boa referência: https://cssreference.io/

Compatibilidade do navegador: https://gridbyexample.com/browsers/

reddtoric
fonte
2
grid-auto-columns="max-content"também pode ser útil. Isso fará com que o tamanho do item da grade corresponda ao conteúdo. Além disso, a compatibilidade do navegador não deve ser mais um problema: caniuse.com/#feat=css-grid
Alex Salomon
Esta deve ser a resposta aceita. Eu sei que comentários não são para agradecimento, eu estava apenas fazendo uso da tela 'flex' até agora, e essa coisa de 'grade' torna tudo muito fácil a partir do próprio contêiner pai! Para não deixá-lo totalmente inútil, acrescentaria a seguinte referência que ajuda muito para quem quer aprender mais: css-tricks.com/snippets/css/complete-guide-grid
Rohan Kumar
11

Isso é tão fácil.

Você pode definir o estilo dos elementos excluindo o primeiro, apenas em uma linha de código:

span ~ span {
padding-left: 10px;
}

e pronto, sem manipulação de classe.

Angie
fonte
1
Este funciona perfekt. span + span não funcionou, mas span ~ span funciona perfeitamente! Obrigado
juliusmh
No meu caso, tenho vários spans, alguns dos quais podem não conter a classe "Mostrando", então o que preciso é em span.Showing ~ span.Showingvez de span.Showing + span.Showing. ~é o seletor geral de irmãos, onde um não precisa seguir diretamente o outro.
Eric
10

Você pode tirar vantagem do fato de que spané um elemento embutido

span{
     word-spacing:10px;
}

No entanto, essa solução será interrompida se você tiver mais de uma palavra de texto em seu intervalo

Ben
fonte
6
span:not(:last-child) {
    margin-right: 10px;
}
Vladyslav Savchenko
fonte
3

Você pode escrever assim:

span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}
sandeep
fonte
2

<span>é um elemento embutido para que você não possa espaçá-los sem torná-los nivelados. Tente isto

Horizontal

span{
    margin-right: 10px;
    float: left;
}

Vertical

span{
    margin-bottom: 10px;
}

Compatível com todos os navegadores.

Moe Sweet
fonte
2

Você deve envolver seus elementos dentro de um contêiner e, em seguida, usar os novos recursos CSS3, como grade css , curso gratuito e, em seguida, usar o grid-gap:valueque foi criado para o seu problema específico

span{
  border:1px solid red;
}
.inRow{
  display:grid;
  grid-template-columns:repeat(auto-fill,auto);
  grid-gap:10px /*This add space between elements, only works on grid items*/
}
.inColumn{
  display:grid;
  grid-template-rows:repeat(auto-fill,auto);
  grid-gap:15px;
}
<div class="inrow">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
<div class="inColumn">
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

John Balvin Arias
fonte
Eu estava tentando adicionar espaço entre os elementos de uma classe div usando o estilo css. Usei seu exemplo para construir meu código para isso. Funcionou como um encanto. Obrigado!
Elias EstatisticsEU
1

Ou, em vez de definir a margem e não substituí-la, você pode apenas defini-la corretamente imediatamente com a seguinte combinação:

span:not(:first-of-type) {
    margin-left:  5px;
}

span:not(:last-of-type) {
    margin-right: 5px;
}
jalooc
fonte
Boa resposta, a restrição é o suporte do navegador :first-of-typee :last-of-typeseletores CSS.
Dan de
... também verifique noto suporte ao navegador de expressão
Dan
1
@Dan é realmente ótimo, todos os vários navegadores dos últimos anos estão cobertos. Mas devo admitir que a solução de yzoja é ainda mais inteligente :)
jalooc
Esta solução é superior no caso específico de incluir também bordas entre os elementos como separadores (como um UL em um nav, por exemplo), pois posicionará corretamente a borda no meio do espaçamento.
Mir
0
span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>
Tim Joyce
fonte
0

Se quiser alinhar vários itens e quiser ter a mesma margem em todos os lados, você pode usar o seguinte. Cada elemento dentro container, independentemente do tipo, receberá a mesma margem circundante.

insira a descrição da imagem aqui

.container {
  display: flex;
}
.container > * {
  margin: 5px;
}

Se você deseja alinhar itens em uma linha, mas o primeiro elemento toca a borda esquerda de containere todos os outros elementos estão igualmente espaçados, você pode usar isto:

insira a descrição da imagem aqui

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}
Stefan Zhelyazkov
fonte
2
Embora este código possa responder à pergunta, fornecer contexto adicional sobre por que e / ou como este código responde à pergunta melhora seu valor a longo prazo.
β.εηοιτ.βε