css - クロームのボタンサイズ

Question

Chromeのボタンのサイズを4x4または5x5ピクセルの非常に小さいものに設定しようとしていますが、非常に奇妙な結果が得られています。私のコードは次のとおりです。

<input type="button" style="height: 4px; width: 4px; background-color: #aabbfe"; onclick="document.body.style.backgroundColor='#aabbfe'";/>

高さと幅は同じですが、結果は水平の長方形のボタンになります。

正方形の比率（私が望むもの）を取得する唯一の方法は、高さ：14px、幅：5pxを設定することでしたが、これは意味がありません。また、Chromeではボタンを小さくすることができません。

誰が私がどこでバカになったのか教えてくれますか？私は非常に基本的なものを見落としているに違いないと確信していますが、それを見つけることができません。助けてくれてありがとう。

score 2 · Accepted Answer

ボタンからパディングを削除する必要があります。

input {
    padding:0;
}

これは、Chromeユーザーエージェントのスタイルシートに次のスタイルが適用されていることが原因です。

input[type="button"], 
input[type="submit"], 
input[type="reset"], 
input[type="file"]::-webkit-file-upload-button, 
button {
    padding: 1px 6px;
}

score 0 · Accepted Answer

必要がない場合は、余白とパディング、およびアウトラインを必ず削除してください。これらはすべて、要素の寸法に影響を与える可能性があります。

2 に答える 2