Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengalih keluar ruang antara butang dalam css

Bagaimana untuk mengalih keluar ruang antara butang dalam css

WBOYasal: 2021-12-02 11:58:153273semak imbas

Dalam CSS, anda boleh menggunakan atribut "font-size" untuk mengalih keluar jarak antara butang Jarak antara butang adalah kerana nod elemen mempunyai nod teks, yang akan menempati lebar apabila mengindenkan kod Anda hanya perlu memberikan Tambah gaya "font-size:0;" kepada elemen induk elemen butang untuk mengalih keluar jarak.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara membuang jarak antara butang dalam css

Biasanya, apabila kita menetapkan butang, akan ada jarak antara butang. Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
</html>

Hasil keluaran:

Bagaimana untuk mengalih keluar ruang antara butang dalam css

Pada masa ini kita perlu menetapkan elemen induk elemen butang dan menambah " font- size:0;" gaya sudah memadai.

Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{
font-size:0;
}
</style>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
</html>

Hasil keluaran:

Bagaimana untuk mengalih keluar ruang antara butang dalam css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        font-size:0;
        width:200px;
        height:100px;
        border:1px solid red;
}
</style>
</head>
<body>
    <div>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    </div>
</body>
</html>

Hasil keluaran:

Bagaimana untuk mengalih keluar ruang antara butang dalam css

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar ruang antara butang dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk mencapai kesan bukan perubahan warna tag dalam cssArtikel seterusnya：Bagaimana untuk mencapai kesan bukan perubahan warna tag dalam css

Artikel berkaitan

Lihat lagi