Tambahkan spasi di antara elemen HTML hanya dengan menggunakan CSS

Saya memiliki beberapa elemen HTML yang sama satu demi satu:

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

Saya mencari cara terbaik untuk menambahkan spasi ANTARA elemen hanya menggunakan CSS

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

Selain itu:

• Harap tulis kompatibilitas browser tanda terima Anda

MEMPERBARUI

Sepertinya saya tidak jelas. Saya tidak ingin menggunakan MARKUP HTML TAMBAHAN seperti

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

Saya tidak ingin menggunakan tabel

Saya ingin rentang pertama dan terakhir ditargetkan secara otomatis oleh CSS

Saya tidak ingin menggunakan javascript

Persyaratan opsional: rentang terakhir tidak boleh BUKAN ANAK TERAKHIR dari tag induk, tetapi itu akan menjadi SPAN TERAKHIR dari tag induk. Span tidak memiliki tag lain di antaranya.

Cara yang baik untuk melakukannya adalah ini:

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

Setiap spandidahului oleh span(jadi, setiap spankecuali yang pertama) akan memiliki margin-left: 10px.

Berikut jawaban yang lebih detail untuk pertanyaan serupa: Pemisah antar elemen tanpa peretasan

Cukup gunakan margin atau padding.

Dalam kasus khusus Anda, Anda margin:0 10pxhanya dapat menggunakan pada tanggal 2 <span>.

MEMPERBARUI

Inilah solusi CSS3 yang bagus ( jsFiddle ):

span {
    margin: 0 10px;
}

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

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

Canggih elemen seleksi menggunakan penyeleksi suka :nth-child(), :last-child, :first-of-type, dll didukung karena Internet Explorer 9.

tambahkan aturan ini ke penampung induk:

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

Referensi yang bagus: https://cssreference.io/

Kompatibilitas browser: https://gridbyexample.com/browsers/

Itu sangat mudah.

Anda dapat mengatur gaya elemen dengan mengecualikan yang pertama, hanya dalam satu baris kode:

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

dan selesai, tanpa manipulasi kelas.

Anda dapat memanfaatkan fakta bahwa spanmerupakan elemen inline

span{
     word-spacing:10px;
}

Namun, solusi ini akan rusak jika Anda memiliki lebih dari satu kata teks dalam rentang Anda

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

Anda bisa menulis seperti ini:

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

<span>adalah elemen sebaris sehingga Anda tidak dapat membuat spasi pada mereka tanpa menjadikannya level blok. Coba ini

Horisontal

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

Vertikal

span{
    margin-bottom: 10px;
}

Kompatibel dengan semua browser.

Anda harus membungkus elemen Anda di dalam wadah, lalu gunakan fitur CSS3 baru seperti kisi css , kursus gratis , dan kemudian gunakan grid-gap:valueyang telah dibuat untuk masalah spesifik Anda

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>

Atau, alih-alih mengatur margin dan daripada menimpanya, Anda bisa langsung mengaturnya dengan benar dengan kombinasi berikut:

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>

Jika Anda ingin meratakan berbagai item dan Anda ingin memiliki margin yang sama di semua sisi, Anda dapat menggunakan yang berikut ini. Setiap elemen dalam container, apa pun jenisnya, akan menerima margin sekitarnya yang sama.

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

Jika Anda ingin meratakan item dalam satu baris, tetapi elemen pertama menyentuh tepi paling kiri container, dan semua elemen lainnya memiliki jarak yang sama, Anda dapat menggunakan ini:

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