Mengapa apabila menjajarkan elemen butang secara menegak dalam div, elemen tersebut mempunyai lebih banyak ruang menegak daripada yang ditakrifkan oleh jidar CSS?

Question

Halaman kerja saya sedang berjalan ada di tapak ini

Saya fikir bahagian paling sukar halaman ini ialah skrip dan gaya yang digunakan untuk menapis hasil, tetapi sebenarnya bahagian penapisan berfungsi seperti yang diharapkan, ia hanya isu penggayaan/penjajaran yang mengelirukan saya

Bahagian yang saya hadapi masalah ialah kandungan utama div myBtnContainer - di bawah anda boleh melihat blok kelabu untuk menyusun keputusan, SEMUA, SEMASA, AKUSTIK dll

Seperti yang anda boleh lihat, mana-mana butang dengan dua baris teks (pembungkusan perkataan) akan mencipta ruang putih tambahan di atas butang itu sendiri - anda akan melihat bahawa PERUBAHAN WARNA ialah butang pertama di mana ini berlaku - ini bukan sahaja akan mengubah butang Menekan ke bawah juga akan menolak titik permulaan baris seterusnya ke bawah

Saya sangat pemula di sini - cukup bijak untuk google bahagian yang saya perlukan dan kemudian salin/tampal/edit untuk percubaan dan kesilapan - itu biasanya cukup untuk mengatasinya, tetapi kali ini saya menemui jalan buntu

Sebarang bantuan amatlah dihargai

Saya telah melihat dalam alat pembangun Safari untuk melihat sama ada ia adalah isu padding, dan setakat yang saya tahu ia bukan isunya, tetapi ia mungkin satu-satunya perkara yang boleh saya selesaikan (atau mungkin tidak... )

Answer 1

Boleh guna flex box macam ni

#myBtnContainer {display:flex;flex-wrap: wrap;}

Ini akan menjajarkan item secara menegak secara lalai

Answer 2

Memang, seperti yang @Austin sebutkan, menggunakan flexbox ialah cara anda yang disyorkan. Khususnya, cuma tambah css berikut pada halaman anda:

#myBtnContainer {
    display: flex;
    flex-direction: row; /* optional, because it's the default */
    flex-wrap: wrap;
}

Anda boleh belajar tentang flexbox dengan lebih terperinci, ia adalah sistem yang sangat asas dan penting digunakan di laman web. Saya mengesyorkan halaman web berikut: https://css-tricks.com/snippets/css/a-guide-to-flexbox/