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.
text
span
variabel s?span
elemen yang dihasilkan oleh layanan web saya tidak memiliki akses ke. Jadi saya tidak bisa mengubah markup. Namun, saya dapat sepenuhnya menggunakan CSSJawaban:
Cara yang baik untuk melakukannya adalah ini:
Setiap
span
didahului olehspan
(jadi, setiapspan
kecuali yang pertama) akan memilikimargin-left: 10px
.Berikut jawaban yang lebih detail untuk pertanyaan serupa: Pemisah antar elemen tanpa peretasan
sumber
.sidebar-img + .sidebar-text { margin-left: 40px; }
Cukup gunakan margin atau padding.
Dalam kasus khusus Anda, Anda
margin:0 10px
hanya dapat menggunakan pada tanggal 2<span>
.MEMPERBARUI
Inilah solusi CSS3 yang bagus ( jsFiddle ):
Canggih elemen seleksi menggunakan penyeleksi suka
:nth-child()
,:last-child
,:first-of-type
, dll didukung karena Internet Explorer 9.sumber
span
secara manual? Ini seharusnya menjadi tugas CSSspan
s dandiv
s (yang merupakan elemen blok). Solusi Anda tetap valid jika Anda mendefinisikandiv
s sebagai elemen inline ...tambahkan aturan ini ke penampung induk:
Referensi yang bagus: https://cssreference.io/
Kompatibilitas browser: https://gridbyexample.com/browsers/
sumber
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-gridItu sangat mudah.
Anda dapat mengatur gaya elemen dengan mengecualikan yang pertama, hanya dalam satu baris kode:
dan selesai, tanpa manipulasi kelas.
sumber
span.Showing ~ span.Showing
bukanspan.Showing + span.Showing
.~
adalah pemilih saudara umum, di mana seseorang tidak perlu mengikuti yang lain secara langsung.Anda dapat memanfaatkan fakta bahwa
span
merupakan elemen inlineNamun, solusi ini akan rusak jika Anda memiliki lebih dari satu kata teks dalam rentang Anda
sumber
sumber
Anda bisa menulis seperti ini:
sumber
<span>
adalah elemen sebaris sehingga Anda tidak dapat membuat spasi pada mereka tanpa menjadikannya level blok. Coba iniHorisontal
Vertikal
Kompatibel dengan semua browser.
sumber
Anda harus membungkus elemen Anda di dalam wadah, lalu gunakan fitur CSS3 baru seperti kisi css , kursus gratis , dan kemudian gunakan
grid-gap:value
yang telah dibuat untuk masalah spesifik Andasumber
Atau, alih-alih mengatur margin dan daripada menimpanya, Anda bisa langsung mengaturnya dengan benar dengan kombinasi berikut:
sumber
:first-of-type
dan:last-of-type
pemilih CSS.not
dukungan browser ekspresisumber
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.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:sumber