Html-<细节>多余字符(ex:回车符)引发的间距问题

来源：互联网发布：当前网络不可用怎么办编辑：程序博客网时间：2024/05/21 11:34

废话不多说先上代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>多余字符(ex.回车符)引发的间距问题</title>    <style type="text/css">        ul{            font-size: 0px;            margin-top: 20px;        }        li{            display: inline-block;            font-size: 16px;        }        span{            text-align: center;            font-size: 16px;        }    </style></head><body>    <span style="background: red">omg_3</span>    <span style="background: red">omg_4</span>    <span style="background: red">omg_1</span><span style="background: green">omg_2</span>    <ul style="height:400px;overflow: hidden;">        <li style="width: 200px;height:100px;background:red;"><span>区域1</span></li>        <li style="width: 200px;height:100px;background:blue;"><span>区域2</span></li>    </ul></body></html>

这里写图片描述

不管是行内元素还是行内块状元素都会在同一行中而往往我们为了方便阅读代码，代码的风格是这样的

<span style="background: red">omg_3</span>(看不见的回车符)<span style="background: red">omg_4</span>(看不见的回车符)</html>

浏览器会把一些看不见的例如:回车符,空格等，识别成一个字符，从而占据一个字的空间

此时推荐的解决方案为
把父级元素的font-size设置为0;
单独设置子元素的font-size,这样就可以解决行内元素间的间距问题

阅读全文

0 0