如何去除换行时的多余空白？inline-block元素宽度优化

要让黑色背景宽度与内容里最宽的一行对齐，而非占满设置的max-width，可以用以下两种方法修改CSS：

方法一：使用width: fit-content #

给.hero-title添加width: fit-content，它会让元素宽度自动收缩到内容最宽行的尺寸，同时保留max-width的限制——当内容总宽度超过473px时，依然会自动换行：

.hero-title {
  background: #000;
  color: #ffffff;
  display: inline-block;
  padding: 20px;
  width: fit-content;
  max-width: 473px;
}

方法二：改用display: inline-table #

把display: inline-block替换成display: inline-table，表格元素默认会根据内容最宽行自适应宽度，max-width的限制也依然有效：

.hero-title {
  background: #000;
  color: #ffffff;
  display: inline-table;
  padding: 20px;
  max-width: 473px;
}

两种方法都能解决问题，width: fit-content逻辑更直观，现代浏览器都已支持；inline-table的兼容性则稍好一些。

内容的提问来源于stack exchange，提问作者тнє Sufi