Как сделать так, чтобы мой крест полностью соответствовал окружающему контейнеру?

Question

Вот демо: https://stackblitz.com/edit/react-ishkxp?file=index.js

Когда вы нажмете на крест, вы увидите, что вокруг креста осталось место. Я бы удалил это пространство.

Я бы хотел, чтобы при нажатии на крестик контейнер подходил к кресту максимально, а не оставлял go оставшееся пространство.

Я пробовал:

Размеры рамки: высота рамки: авто; отсутствие точности по ширине для создания содержимого в зависимости от высоты с использованием буквы вместо изображения с размером шрифта, чтобы гарантировать, что это размер буквы, который учитывается. кнопка сброса и стили диапазона. играть с межбуквенным интервалом и эм. играть с дисплеем: flex

Мне интересно, если этот шрифт заставляет компонент оставаться с пробелом.

Вот мой ReactJS фрагмент:

.container {
  height: auto;
  width: auto;
  box-sizing: border-box;
  display: flex;
}

.cross {
  display: block;
  height: auto;
  font-size: 4em;
  box-sizing: border-box;
}

<button class="container">
         <span class="cross" >&times;</span>
     </button>

Answer 1

на промежутке для вашего кросса добавьте следующее css:

line-height:.5
vertical-align:middle

Answer 2

Если я правильно понял ваш вопрос на вашем вопросе, вы захотите определить line-height для .cross, чтобы было меньше места над и под крестиком. Кроме того, по умолчанию браузер padding является причиной нежелательного пространства. Так что, возможно, вы захотите установить padding: 0.
И overflow: hidden; для .container, чтобы настроить кнопку на новую высоту.

.container {
  height: auto;
  width: auto;
  box-sizing: border-box;
  display: flex;
  overflow: hidden; /* Added */
  padding: 0; /* Added. Removes the browser's default padding of buttons. */
}
.cross {
  display: block;
  height: auto;
  font-size: 4em;
  box-sizing: border-box;
  line-height: .6; /* Added. Adjust value based on font and glyph. */
}