这是因为默认情况下该<button>
元素具有padding
. 放padding: 0;
.button {
display:inline;
height:10px;
width:10px;
border: 1px solid black;
border-radius:50%;
padding: 0;
}
<button class="button"></button>
在谷歌浏览器中,按钮的默认填充是padding: 2px 6px 3px;
这意味着
padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
这就是使它看起来呈卵形的原因。所以padding
不必为零,但您必须将所有值设置为相同的大小:
.button {
display:inline;
height:10px;
width:10px;
border: 1px solid black;
border-radius:50%;
padding: 20px;
}
<button class="button"></button>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句