行内，行内块元素同行显示问题

最新推荐文章于 2023-03-08 19:32:54 发布

原创最新推荐文章于 2023-03-08 19:32:54 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #行内块元素同行显示问题

前端专栏收录该内容

0 篇文章

订阅专栏

本文探讨了HTML中行内元素同行显示时出现的间距问题，并提供了两种解决方案：一是通过调整代码布局避免换行；二是利用CSS设置父元素的font-size为0，同时确保子元素的字体大小正确设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

行内块，行内元素同行显示会有间隔

在这里插入图片描述

解决方法

不换行，代码中同行元素写在同一行中
```
<input type="text"><input type="text">
```

父元素设置font-size: 0px; ，自身也设置font-size属性，否则font-size会被继承

<style>
        .test {
            font-size: 0;
        }
    </style>
</head>
<body>
<div class="test">
    <input type="text">
    <input type="text">
</div>
</body>

<style>
        .test {
            font-size: 0;
        }

        span {
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="test">
    <span>hello</span> <span>world</span>
</div>
</body>