如何在HTML代码中新建一行而不显示空格[duplicate]

smtd7mpg  于 2022-12-16  发布在  其他
关注(0)|答案(1)|浏览(119)

此问题在此处已有答案

How to remove the space between inline/inline-block elements?(41个答案)
2天前关闭。
假设我有以下代码:

<html>
    <body>
        <style>
            span {
                background: red;
            }
        </style>

        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
    </body>
</html>

并产生以下结果:

我想要的结果是:

这显然可以通过以下代码实现:

<html>
    <body>
        <style>
            span {
                background: red;
            }
        </style>

        <span>A</span><span>B</span><span>C</span><span>D</span>
    </body>
</html>


有没有可能在不把span放在一行的情况下得到第二个结果?我这样问是因为在元素有多个属性和嵌套子元素的情况下,我发现第二种编码方式可读性较差。

wvt8vs2t

wvt8vs2t1#

如果需要,您可以将左margin设置为负,并稍微增加span元素的横向填充。

span {
  background-color: red;
  margin-left: -.25rem;
  padding: 0 .05rem
}
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>

相关问题