1

画像を含むボタンのスタイリングに関する現在の問題を示す例を作成しました。

例 (申し訳ありませんが、まだ画像の投稿は許可されていません)

画像（img）の高さは32ピクセルですが、周囲の高さbuttonは34ピクセル、周囲の高さdivは36ピクセルです。

追加のピクセルはどこから来るのですか?! これらのボタンの高さを 32 ピクセルにし、2 つのボタンの間のスペースをなくしたいと考えています。ボタンに特定の高さ (32px など) を設定したくありません。コンテンツ (画像、テキスト) のサイズに適応する必要があります。

index.html

<!DOCTYPE HTML>
<html >
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            div {
                border: 0;
                margin: 0;
                padding: 0;
            }
            button {
                border: 0; 
                padding: 0; 
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <button><img src="img/site/buttons/32x32/add_user.png"> Benutzer hinzufügen</button>
        </div>
        <div>
            <button><img src="img/site/buttons/32x32/add_user.png"> Benutzer hinzufügen</button>
        </div>
    </body>
</html>
4

1 に答える 1

2

余分なスペースは、画像の垂直方向の配置から生じます。

画像の初期配置は ですbaseline。ベースラインの下にある文字 (g、j、q など) と下線を引くために、テキストの下に余分なスペースが許可されています。そのため、画像をテキストのベースラインに揃えると、下に余分なスペースが残ります。

これを試して：

img { 
    display:inline-block; 
    vertical-align:middle; 
}

フィドルを見る

于 2014-05-29T21:24:20.150 に答える