按钮没有出现圆形的CSS

Question

我试图创建一组圆形按钮与CSS：

.button { 
display:inline; 
height:10px; 
width:10px; 
border: 1px solid black; 
border-radius:50%; 
} 

然而，我的按钮显得更卵形形状，如下面的屏幕截图所示。为什么会这样，我该如何解决这个问题？

Answer 1

这是因为在默认情况下<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>