解决HTML中换行会出现间隙问题

源代码中连续几个行内元素中的换行在浏览器中会被解释为一个空格,空格和回车都会被显示为一个3px的空格。

例如：

代码语言：javascript复制

<div class="content">
        <a href="#">小米网</a>
        <a href="#">MIUI</a>
</div>

效果如图：

（此时小米网和MIUI之间有一个小空格

解决办法：

方法一、

在换行处父级标签加css: {font-size:0}; 这样换行后就不会有空格出现. css:

代码语言：javascript复制

.content{
    font-size: 0;
}

方法二、

使用浮动： css:

代码语言：javascript复制

  a{
            float: left;
        }

方法三、

采用flex布局，直接消除默认浮动 css:

代码语言：javascript复制

  .content{
         display: flex;
     }

效果图：

css html flex 布局 浏览器

0 人点赞