Bagaimana untuk mengalih keluar ruang antara butang dalam css-tutorial css-php.cn

Bagaimana untuk mengalih keluar ruang antara butang dalam css

WBOY

Lepaskan： 2021-12-02 11:58:15

asal

3338 orang telah melayarinya

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.

Bagaimana untuk mengalih keluar ruang antara butang dalam css

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!