我試圖將Chrome中的按鈕大小設置為非常小的尺寸，4x4或5x5 px，但我得到了一些非常奇怪的結果。我的代碼是:

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

雖然高度和寬度相同，但結果是一個水平的矩形按鈕。

我能得到一個正方形比例(這是我想要的)的唯一方法是設置高度:14px乘寬度:5px，這是沒有意義的，而且，我不能讓Chrome中的按鈕變得更小。

誰能告訴我，我在哪里變笨了？我確信我一定忽略了一些非常基本的東西，但是我就是找不到。預先感謝任何幫助。

你只需要把紐扣上的襯墊去掉。

JSFiddle

input {
    padding:0;
}

這是由Chrome用戶代理樣式表中應用的以下樣式造成的。

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

如果不需要的話，一定要去掉邊距和填充以及邊框。這些都可能對元素的尺寸有影響。