主页 / 问题 / 1528470
Accepted
Oliver Patterson
Asked:2023-07-02 13:01:36 +0000 UTC2023-07-02 13:01:36 +0000 UTC

按钮的大小不等于其中内容的大小

  • 772

我不明白为什么按钮的大小24x27，如果内容（图标）的大小24x24？

button
{
  padding: unset;
  background-color: unset;
  border: unset;
}
<button>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill-rule="evenodd" d="M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M12,18.0254424 C11.172,18.0254424 10.5,17.3534424 10.5,16.5254424 C10.5,15.6974424 11.172,15.0254424 12,15.0254424 C12.829,15.0254424 13.5,15.6974424 13.5,16.5254424 C13.5,17.3534424 12.829,18.0254424 12,18.0254424 Z M12,6 C12.5522847,6 13,6.44771525 13,7 L13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,7 C11,6.44771525 11.4477153,6 12,6 Z"/>
  </svg>
</button>

html

1 个回答

  1. Best Answer

    该按钮是内联的，这意味着它将计算line-height。如果它不暗示文本，您可以输入line-height: 0;. 您还可以设置display: inline-flex;or display: flex;- 这也可以工作，对于 flex 来说，许多 CSS 规则的工作方式不同。

    button.btn2 {
  padding: unset;
  background-color: unset;
  border: unset;
  line-height: 0;
}

button.btn1 {
  padding: unset;
  background-color: unset;
  border: unset;
  display: inline-flex;
}
    <button class="btn1">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill-rule="evenodd" d="M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M12,18.0254424 C11.172,18.0254424 10.5,17.3534424 10.5,16.5254424 C10.5,15.6974424 11.172,15.0254424 12,15.0254424 C12.829,15.0254424 13.5,15.6974424 13.5,16.5254424 C13.5,17.3534424 12.829,18.0254424 12,18.0254424 Z M12,6 C12.5522847,6 13,6.44771525 13,7 L13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,7 C11,6.44771525 11.4477153,6 12,6 Z"/>
  </svg>
</button>

<button class="btn2">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill-rule="evenodd" d="M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M12,18.0254424 C11.172,18.0254424 10.5,17.3534424 10.5,16.5254424 C10.5,15.6974424 11.172,15.0254424 12,15.0254424 C12.829,15.0254424 13.5,15.6974424 13.5,16.5254424 C13.5,17.3534424 12.829,18.0254424 12,18.0254424 Z M12,6 C12.5522847,6 13,6.44771525 13,7 L13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,7 C11,6.44771525 11.4477153,6 12,6 Z"/>
  </svg>
</button>

    • 1

相关问题