display:inline-block的间隙问题和解决办法

最新推荐文章于 2024-12-13 20:39:15 发布

Goddess_liangyanli

最新推荐文章于 2024-12-13 20:39:15 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

文章标签：解决间隙问题

本文链接：https://blog.youkuaiyun.com/sinat_39430615/article/details/76214542

本文介绍如何使用CSS解决inline-block元素间的水平和垂直间隙问题。通过设置父级元素font-size为0来消除水平间隙，并在子元素上应用vertical-align:bottom来消除垂直间隙。

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

1、display:inline-block在水平方向的间隙；

代码如下：

<style type="text/css">
    *{margin:0;padding:0; }
    .test{width:550px; border:1px blue solid;/* font-size: 0px;*/
    }
    .test div{ width:100px;height:100px;display:inline-block;
        background:aqua;     /*vertical-align: bottom;*/ }
</style></head><body><div class="test">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></div></body>

    /*四个div之间有小间距，
   解决办法：让水平间隙消失就是在父级上加font-size:0;
   让垂直间隙消失，就在子元素上加vertical-align:bottom;，
   如果子标签内加上任意文字，
   则display:inline-block元素不会生成垂直方向有空白！ 
   下面是解决的效果：*/