行内块元素排版时的间隙问题

最新推荐文章于 2024-07-22 16:12:49 发布

zzr0001

最新推荐文章于 2024-07-22 16:12:49 发布

阅读量389

点赞数 5

分类专栏： HTML+CSS常见问题文章标签： css javascript html

本文链接：https://blog.csdn.net/zzr0001/article/details/136379780

版权

HTML+CSS常见问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了解决HTML中行内块元素间出现缝隙的问题，原因在于空白字符被浏览器处理。提供四种解决方案：合并行、设置父元素font-size为0、浮动布局和定位。通过实例演示了如何使用font-size:0来消除间距。

摘要由CSDN通过智能技术生成

例如：我们要使用行内块完成一个横向排版

代码执行如下：

<head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 320px;
            height: 310px;
            line-height: 50px;
            border: 3px solid red;
            margin: 20px auto;
        }
        .div1,.div2,.div3{
            width: 100px;
            height: 50px;
            border: 1px solid black;
            display: inline-block;
            font-size: 16px;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div class='box'>
        <div class='div1'></div>
        <div class='div2'></div>
        <div class='div3'></div>
    </div>
</body>

执行结果如图所示，每个元素之间存在一定的缝隙

产生原因：

元素被当成行内元素排版时，元素之间的空白符（空格、回车）都会被浏览器处理，回车符会转化为一个空白符

解决方案：

1、将并排的代码放到一行处理例：<div></div><div></div>

2、给父元素设置font-size:0;

3、浮动 float

4、定位 position

<head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 320px;
            height: 310px;
            line-height: 50px;
            border: 3px solid red;
            margin: 20px auto;
            font-size:0;
        }
        .div1,.div2,.div3{
            width: 100px;
            height: 50px;
            border: 1px solid black;
            display: inline-block;
            font-size: 16px;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div class='box'>
        <div class='div1'></div>
        <div class='div2'></div>
        <div class='div3'></div>
    </div>
</body>

完美解决