inline-block元素间隙处理

hightopo 发布于2019-04-23 13:09 / 1721人阅读

摘要：要使多个块级元素并行显示，可使用或者进行处理使用会出现元素之间的间隙我是一个我是一个我是一个我是一个如图间隙是由换行或者回车导致的，所以将标签代码都写同一行即可解决。如图注释如需对低版本兼容还得进一步处理

要使多个块级元素并行显示，可使用float或者inline-block进行处理

使用inline-block会出现元素之间的间隙

<div class="demo">
    <p>我是一个spanp>
    <p>我是一个spanp>
    <p>我是一个spanp>
    <p>我是一个spanp>
div>

.demo span{
    background:#ffffd;
    display:inline-block;
}

如图：

*间隙是由换行或者回车导致的，所以将标签代码都写同一行即可解决。不过这个方法不靠谱，因为space是由换行或回车所产生空白符所致，所以在其父元素设置font-size：0，如元素内有文字标签需重写font-size。

.demo{
    font-size:0;
}
.demo span{
    background:#ffffd;
    display:inline-block;
    font-size:14px;
}

如图：

注释：如需对低版本兼容还得进一步处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1504.html

深入css之去除inline-block元素之间的多余间隙

摘要：父容器设置优点弹性布局可以去除多余间隙，而且可以轻松的实现垂直居中，水平居中等效果。缺点过低版本的浏览器不支持该属性。什么是inline-block之间的多余间隙考虑以下代码： One Two Three nav a { display: inline-block; //或者inline; padding: 5px; background: red; }...

caspar 2019-08-30 13:47 评论0 收藏0
inline-block兼容及间隙问题

摘要：一兼容性不识别但可以触发块元素，其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置，使用触发。一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致原因分析：使用inline-block属性在IE下会...

learn_shifeng 2019-08-28 18:30 评论0 收藏0
inline-block兼容及间隙问题

摘要：一兼容性不识别但可以触发块元素，其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置，使用触发。一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致原因分析：使用inline-block属性在IE下会...

binaryTree 2019-08-01 15:01 评论0 收藏0
「前端早读君008」新手必踩坑之display: inline-block

摘要：中线基线顶线底线中线基线顶线底线是文本的几个基本线，其对应位置如下图基线小写英文字母的下端沿。中线小写英文字母的中间。将元素的基线与其父元素的下标基线对齐。将元素的基线对准给定长度高于其父元素的基线。今日励志语往日不可追，来日犹可期，祝大家2019年继往开来迷之间隙我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下：我我 ...

sevi_stuo 2019-08-30 15:55 评论0 收藏0