内联元素上的背景颜色，没有内联填充
TD5*_*540 5 html javascript css
我希望背景颜色完全围绕内联字符。
无法更好地解释它，所以这里的图片准确地显示了我想要的内容：
超文本标记语言
<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 能帮上忙吗？
尝试这个：
<!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>