关于在html中换行引起的空格问题及解决

作者: 王兴岭 | 来源:发表于2020-05-16 17:57 被阅读0次

关于在html中换行引起的空格问题及解决
iOS8.3使用\n换行问题
iOS开发记录
HTML中的换行与空格
字符空格,换行的一些显示问题
HTML文档设置标记
【总结】怎样在
标签内显示空格——空格实体
关于在div标签中实现换行空白格展示
textarea placeholder内容显示不出来
语法

我在最近写html的时候，经常会碰到标签的换行，或者是内容的换行，在界面中是会出现空格的间隙。如：

<body>
    <div>
        <span>123</span><span>456</span>
    </div>
    <div>
        <span>123</span>
        <span>456</span>
    </div>
</body>

页面显示会出现空格

image.png

解决方法：

1在父标签上设置font-size：0px; 然后单独给子标签设置字体大小就能解决这个问题了。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div {
            font-size: 0px;
        }
        span {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>
        <span>123</span><span>456</span>
    </div>
    <div>
        <span>123</span>
        <span>456</span>
    </div>
</body>

效果：

image.png

2 把换行去掉或者用注释风格两行, 牺牲了可读性

<body>
    <div>
        <span>123</span><span>456</span>
    </div>
    <div>
        <span>123</span><!--
        --><span>456</span>
    </div>
</body>

image.png