Yalnızca CSS kullanarak HTML öğeleri arasında boşluk ekleyin

Birbiri ardına giden birkaç aynı HTML öğem var:

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

Yalnızca CSS kullanan öğeler ARASINA boşluk eklemenin en iyi yolunu arıyorum

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

Bunlara ek olarak:

• Lütfen faturalarınızın tarayıcı uyumluluğunu not edin

GÜNCELLEME

Anlaşılan ben belirsizmişim. Gibi HERHANGİ BİR EK HTML İŞARETİ kullanmak istemiyorum

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

Masa kullanmak istemiyorum

İlk ve son aralığın CSS tarafından otomatik olarak hedeflenmesini istiyorum

Javascript kullanmak istemiyorum

İsteğe bağlı gereklilik: son aralık, üst etiketin SON ÇOCUK OLMAYACAKTIR, ancak üst etiketin SON ARALIĞI olacaktır. Aralıkların arasında başka etiket yoktur.

Bunu yapmanın iyi bir yolu şudur:

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

Her birinin spanönünde bir span(yani, spanilk hariç her biri ) olacaktır margin-left: 10px.

İşte benzer bir soruya daha ayrıntılı bir cevap: Kesintisiz öğeler arasında ayırıcılar

Sadece kenar boşluğu veya dolgu kullanın.

Özel durumunuzda, margin:0 10pxyalnızca 2'de kullanabilirsiniz<span> .

GÜNCELLEME

İşte güzel bir CSS3 çözümü ( jsFiddle ):

span {
    margin: 0 10px;
}

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

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

Gelişmiş eleman seçimi kullanarak seçiciler gibi :nth-child(), :last-child, :first-of-typevb Internet Explorer 9'da beri desteklenmektedir.

şu kuralları üst kapsayıcıya ekleyin:

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

İyi referans: https://cssreference.io/

Tarayıcı uyumluluğu: https://gridbyexample.com/browsers/

Öğeleri, yalnızca tek bir kod satırında birincisini hariç tutarak biçimlendirebilirsiniz:

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

Herhangi bir sınıfı değiştirmenize gerek yok.

spanSatır içi bir öğe olduğu gerçeğinden yararlanabilirsiniz

span{
     word-spacing:10px;
}

Ancak, aralığınızda birden fazla metin kelimeniz varsa bu çözüm bozulacaktır.

span:not(:last-child) {
    margin-right: 10px;
}

Şöyle yazabilirsiniz:

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

<span>satır içi bir öğedir, bu nedenle blok düzeyi yapmadan bunlar üzerinde boşluk bırakamazsınız. Bunu dene

Yatay

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

Dikey

span{
    margin-bottom: 10px;
}

Tüm tarayıcılarla uyumludur.

Öğelerinizi bir kabın içine sarmalı, ardından css ızgarası , ücretsiz kurs gibi yeni CSS3 özelliklerini kullanmalı ve daha sonra grid-gap:valueözel sorununuz için oluşturulmuş olanı kullanmalısınız .

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>

Veya marjı ayarlamak ve onu geçersiz kılmak yerine, aşağıdaki combo ile hemen doğru şekilde ayarlayabilirsiniz:

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

span:not(:last-of-type) {
    margin-right: 5px;
}

span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>

Çeşitli öğeleri hizalamak istiyorsanız ve her tarafta aynı kenar boşluğuna sahip olmak istiyorsanız, aşağıdakileri kullanabilirsiniz. Türden containerbağımsız olarak her bir öğe , aynı çevreleyen marjı alacaktır.

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

Öğeleri arka arkaya hizalamak, ancak ilk öğenin en sol kenarına dokunmasını containerve diğer tüm öğelerin eşit aralıklarla yerleştirilmesini istiyorsanız, bunu kullanabilirsiniz:

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}