Tambahkan spasi di antara elemen HTML hanya dengan menggunakan CSS

105

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.

Dan
sumber
Mungkin Anda harus mempertimbangkan untuk menggunakan tabel. Tergantung pada data apa yang masuk ketext
Madara's Ghost
Apakah jumlah spanvariabel s?
tigapuluhdot
@ Kebenaran terakhir harus tabel.
Tim Joyce
The spanelemen yang dihasilkan oleh layanan web saya tidak memiliki akses ke. Jadi saya tidak bisa mengubah markup. Namun, saya dapat sepenuhnya menggunakan CSS
Dan
Dengan pertanyaan seperti ini, Anda harus selalu menentukan dukungan browser yang Anda butuhkan. "Saya memerlukan dukungan IE7" akan menerima jawaban yang sangat berbeda untuk "Saya hanya menggunakan Chrome".
tigapuluhdot

Jawaban:

244

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

tigapuluhdot
sumber
10
Ini adalah solusi yang bagus, meskipun jika penampung Anda akan menjangkau beberapa baris, itu gagal.
Savas Vedova
Ia juga bekerja dengan kelas, seperti ini:.sidebar-img + .sidebar-text { margin-left: 40px; }
parsecer
2
Bagaimana Anda menangani saat item membungkus ke baris berikutnya?
thdoan
@thdoan: Itu tergantung pada tata letak Anda, dll. Anda dapat mencoba sesuatu seperti ini .
tigapuluhdot
1
Saya lebih suka solusi reddtoric menggunakan grid dan grid-gap.
Alex Salomon
29

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.

Simone
sumber
Anda memiliki jawaban yang bagus, Simone, tetapi bisakah Anda menyelesaikan pertanyaan tanpa menentukan yang terakhir spansecara manual? Ini seharusnya menjadi tugas CSS
Dan
ini adalah peretasan tak berpasangan, itulah properti "spasi kata" untuk: w3schools.com/cssref/pr_text_word-spacing.asp periksa jawaban Ben
arieljuod
OP menginginkan ruang antar bentang, jadi boleh saja memberikan solusi untuk elemen sebaris, properti margin / padding / pertama / terakhir tidak diperlukan di sini dan hanya menambah kompleksitas
arieljuod
Sebenarnya, OP mengatakan dia akan menggunakan spans dan divs (yang merupakan elemen blok). Solusi Anda tetap valid jika Anda mendefinisikan divs sebagai elemen inline ...
Simone
16

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/

reddtoric.dll
sumber
2
grid-auto-columns="max-content"semoga juga bermanfaat. Ini akan membuat ukuran item grid sesuai dengan konten. Selain itu, kompatibilitas browser seharusnya tidak menjadi masalah lagi: caniuse.com/#feat=css-grid
Alex Salomon
Ini harus menjadi jawaban yang diterima. Saya tahu komentar bukan untuk terima kasih, saya hanya menggunakan tampilan 'flex' sampai sekarang, dan hal 'grid' ini membuat semuanya begitu mudah dari wadah induk itu sendiri! Agar tidak sepenuhnya tidak berguna, tambahkan referensi berikut yang sangat membantu bagi siapa pun yang ingin mempelajari lebih lanjut: css-tricks.com/snippets/css/complete-guide-grid
Rohan Kumar
11

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.

Angie
sumber
1
Yang ini bekerja dengan sempurna. span + span tidak berfungsi tetapi span ~ span berfungsi seperti pesona! Terima kasih
juliusmh
Dalam kasus saya, saya memiliki beberapa bentang, beberapa di antaranya mungkin tidak mengandung kelas "Menampilkan", jadi apa yang saya perlu adalah span.Showing ~ span.Showingbukan span.Showing + span.Showing. ~adalah pemilih saudara umum, di mana seseorang tidak perlu mengikuti yang lain secara langsung.
Eric
10

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

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

Anda bisa menulis seperti ini:

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

<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.

Moe Manis
sumber
2

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>

John Balvin Arias
sumber
Saya ingin menambahkan spasi di antara elemen kelas div menggunakan gaya css. Saya menggunakan contoh Anda untuk membuat kode saya untuk itu. Bekerja seperti pesona. Terima kasih!
Elias EstatisticsEU
1

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;
}
jalooc.dll
sumber
Jawaban bagus, batasannya adalah dukungan browser :first-of-typedan :last-of-typepemilih CSS.
Dan
... juga periksa notdukungan browser ekspresi
Dan
1
@ Dan itu benar-benar besar, semua beberapa tahun terakhir browser tertutup. Tapi harus saya akui, solusi yzoja bahkan lebih pintar :)
jalooc
Solusi ini lebih unggul dalam kasus khusus yang Anda juga akan menyertakan batas antara elemen sebagai pemisah (jadi seperti UL di nav, misalnya), karena akan menempatkan batas dengan benar di tengah jarak.
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
sumber
0

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.

masukkan deskripsi gambar di sini

.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:

masukkan deskripsi gambar di sini

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}
Stefan Zhelyazkov
sumber
2
Meskipun kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang mengapa dan / atau bagaimana kode ini menjawab pertanyaan tersebut meningkatkan nilai jangka panjangnya.
β.εηοιτ.βε