Размер кнопки не равен размеру контента в ней

Рейтинг: 0Ответов: 1Опубликовано: 02.07.2023

Не понимаю, почему размер кнопки 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>

css html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Кнопка инлайновая, значит она будет высчитывать line-height. Если в ней текста не подразумевается, можете поставить line-height: 0;. Можете также задать display: inline-flex; или 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>