【整理】几种解决inline-block间隙的方案

array_huang 发布于2019-08-29 13:20 / 2386人阅读

摘要：有基础的朋友可以直接跳过序言，直接看方案序有几种属性是内联对象，比如标签等，可以堆在一起显示，宽高由内容决定，不能设置是块对象，比如标签等，要占一整行，但是宽高可以自定义为了弥补和的不足，又扩充了属性可以将对象呈递为内联对象，而内容作为

有基础的朋友可以直接跳过序言，直接看方案

序

display有几种属性：

inline是内联对象，比如、标签等，可以“堆在一起”显示，宽高由内容决定，不能设置；
block是块对象，比如

、

标签等，要占一整行，但是宽高可以自定义；
为了弥补inline和block的不足，又扩充了inline-block属性；
inline-blcok可以将对象呈递为内联对象，而内容作为块对象呈递。

通俗点讲就是

“可定宽高的堆在一起”显示

为什么会有间隙

inline-blcok块之间的不可见符号会被保留父层字体的1/3大小的空间

解决方案

知道了原因，方案就好找了，我把它分为以下几种


    item1
    item2
    item3
    item4
    item5

1、改变书写结构


    item1
item2
item3
item4
item5


    
        item1

        item2

        item3

        item4

        item5


    item1
item2
item3
item4
item5


    item1
item2
item3
item4
item5

以上几种均可以完美的达到去除间隙的作用
但是，从代码的可读性上看，或多或少有一些不足

2、打包工具

使用打包工具或者自写脚本，在上线前将响应HTML代码打包成一行，即可

3、丢失结束标签


    item1
    
item2
    
item3
    
item4
    
item5

此方法虽然可以解决此问题，但是在Doctype为xhtml时将报错，所有方法是否适用须视情况而定。

4、css hack

知道间隙的产生原因和间隙的大小后，动手写一个css hack也是一种很好的方法
1、将父容器的字体大小设置为0，可解决绝大多数浏览器（老版本safari不支持）
2、针对不支持上条的浏览器设置字块或字符间间隙letter-spacing／word-spacing，推荐letter-spacing，因为此属性不会产生负间隙，但需要注意，要在子元素上设置letter-spacing:0
3、如果你转化但是块对象，那需要为低版本浏览器设置inline兼容，不让样式会乱掉
总结以上几点给出以下代码

.parent {
    letter-spacing: -.3333em;
    font-size: 0;
}
.child {
    display: inline;
    display: inline-block;
}

如发现文字有不妥之处，还请不吝赐教

云服务器 GPU云服务器电商的解决方案大数据收集整理方案数据整理及存储方案云计算的解决方案

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

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

未知宽度水平居中的几种方法

摘要：在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。但即使我们没有设置的宽度直接设置的外边距就可以实现水平居中了这样我们就可以通过设置水平居中间接使里面的内容居中。转自未知宽度水平居中的几种方法在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。当时在网上找了一些解决方法，并选了一个最合适的方法，现将...

raledong 2019-08-28 18:05 评论0 收藏0
未知宽度水平居中的几种方法

摘要：在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。但即使我们没有设置的宽度直接设置的外边距就可以实现水平居中了这样我们就可以通过设置水平居中间接使里面的内容居中。转自未知宽度水平居中的几种方法在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。当时在网上找了一些解决方法，并选了一个最合适的方法，现将...

shenhualong 2019-08-01 14:46 评论0 收藏0
前端面试基础(1年以内需掌握)

摘要：客户端数据存储，能维持在多个会话范围内。向元素开头插入由参数指定的内容。向匹配的元素添加指定的类名。移除指定的属性。主要解决了中大量的操作使页面渲染性能降低，加载速度变慢，影响用户体验。区别数据驱动，通过数据来显示视图层而不是节点操作。金三银四公司让我面试 1年经验的前端，特此花时间研究了一番面试题，近日整理了一下想分享出来，让更多小掘友看到，在我看来这些基本都是必备的知识点 cs...

xiaochao 2019-05-22 19:43 评论0 收藏0
前端面试之路一(HTML+CSS面试整理)

摘要：或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。针对多字节文字，中文句子也是单词允许在单词内换行。一、HTML基础 html常见元素和理解 html常见元素分类 head区元素：（不会在页面上留下直接内容） meta title style link script base body区： div/selection/article/aside/header/f...

hqman 2019-08-02 12:09 评论0 收藏0
前端面试之路一(HTML+CSS面试整理)

摘要：或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。针对多字节文字，中文句子也是单词允许在单词内换行。一、HTML基础 html常见元素和理解 html常见元素分类 head区元素：（不会在页面上留下直接内容） meta title style link script base body区： div/selection/article/aside/header/f...

YacaToy 2019-08-29 17:26 评论0 收藏0