如何让我的十字架完全适合周围的容器？答案

【问题标题】：How make my cross to be completely fitted by the surrounding container?如何让我的十字架完全适合周围的容器？
【发布时间】：2020-04-04 19:26:58
【问题描述】：

这里是演示：https://stackblitz.com/edit/react-ishkxp?file=index.js

当您单击十字架时，您会看到十字架周围还有剩余空间。我会删除这个空间。

我希望当我单击十字时，容器会最大程度地适应十字，而不是放开剩余空间。

我试过了：

box-sizing: 边框高度：自动；没有宽度精度，仅根据高度创建内容使用字母而不是具有字体大小的图像，以确保它是考虑到的字母的大小。重置按钮和跨度样式。玩字母间距和 em。玩 display:flex

我想知道这是否是使组件保留空间的字体。

这是我的 ReactJS 的 sn-p：

.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>

【问题讨论】：

不要依赖字体来拥有形状，使用 CSS/SVG 来构建它们，因为所有字体的跨浏览器/设备/操作系统的行为都不同

标签： html css reactjs

【解决方案1】：

如果我正确理解了您的问题，您需要为.cross 定义一个line-height，以便交叉字形上方和下方的空间更少。另外，大概浏览器的默认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. */
}

【讨论】：

【解决方案2】：

在你的十字架的跨度上添加以下 css：

line-height:.5
vertical-align:middle

【讨论】：