没有内联填充的内联元素的背景颜色答案

【问题标题】：background-color on inline elements without inline padding没有内联填充的内联元素的背景颜色
【发布时间】：2015-05-22 18:21:11
【问题描述】：

我希望背景颜色完全环绕内联字符。

无法更好地解释它，所以这里的图片正好显示了我想要的：

HTML

<div>
  <span>HTML Text block - HTML Text block</span>
</div>

CSS

div {
  max-width: 300px;
  line-height: 1.5;
  text-transform: uppercase;
}

span {
  background-color: white;
  box-shadow: 5px 5px 0 black;
  padding: 0;
}

如果单靠 CSS 无法完成，JavaScript 能帮上忙吗？

Here's a codepen

【问题讨论】：

这只有在字体中的字形都具有完全相同的指标时才有效，例如如果每个大写字母的宽度和高度完全相同，或者如果每个符号的边缘都接触到字形边缘，等等。

标签： javascript html css

【解决方案1】：

试试这个：

<!doctype html>
<html>
<head>
  <title>Layout Experiments</title>
  <style>
    *{
      -webkit-box-sizing :border-box;
      -moz-box-sizing    :border-box;
      box-sizing         :border-box;
    }
    div{
      max-width      :300px;
      line-height    :1.5;
      text-transform :uppercase;
      height         :200px;
      background     :wheat;
    }
    span{
      background-color :white;
      box-shadow       :5px 5px 0 black;
      padding          :0;
    }
  </style>
</head>
<body>
<div>
  <span>HTML Text block - HTML Text block HTML Text block - HTML Text block</span>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

试试这个：HTML Text  block -  HTML Text  block

【讨论】：