Javascript 无内联填充的内联元素上的背景色_Javascript_Html_Css

Javascript 无内联填充的内联元素上的背景色

javascript html css

Javascript 无内联填充的内联元素上的背景色,javascript,html,css,Javascript,Html,Css,我希望背景色完全环绕内联字符无法更好地解释这一点，因此这里的图像正好显示了我想要的： HTML 如果单靠CSS做不到，JavaScript有什么帮助吗试试这个： <!doctype html> <html> <head> <title>Layout Experiments</title> <style> *{ -webkit-box-sizing :border-box; -mo

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

无法更好地解释这一点，因此这里的图像正好显示了我想要的：

HTML

如果单靠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>


布局实验
*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
div{
最大宽度：300px；
线高：1.5；
文本转换：大写；
高度：200px；
背景：小麦；
}
跨度{
背景色：白色；
盒影：5px 5px 0黑色；
填充：0；
}
HTML文本块-HTML文本块HTML文本块-HTML文本块

试试这个：

HTML文本

块-

HTML文本
块

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

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

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

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