CSSでボタン間のスペースを削除する方法-CSSチュートリアル-php.cn

CSSでボタン間のスペースを削除する方法

WBOY

リリース： 2021-12-02 11:58:15

オリジナル

3282 人が閲覧しました

CSS では、「font-size」属性を使用してボタン間の間隔を削除できます。ボタン間の間隔は、要素ノードにテキストノードがあり、コードをインデントするときに幅を占めるためです。スペースを削除するには、ボタン要素の親要素に「font-size:0;」スタイルを追加するだけです。

CSSでボタン間のスペースを削除する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

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>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
</html>

ログイン後にコピー

出力結果:

CSSでボタン間のスペースを削除する方法

このとき、ボタン要素の親要素を設定し、「font- size:" をその親要素に: 0;" スタイルで十分です。

例は次のとおりです。

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

ログイン後にコピー

出力結果:

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>

ログイン後にコピー

出力結果:

CSSでボタン間のスペースを削除する方法