css - chrome中的按钮大小

Question

我正在尝试将 Chrome 中按钮的大小设置为非常小的 4x4 或 5x5 像素，但我得到了一些非常奇怪的结果。我的代码是：

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

虽然高度和宽度相同，但结果是一个水平的矩形按钮。

我可以获得正方形比例（这是我想要的）的唯一方法是设置高度：14px by width：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