html - 按钮在 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>