在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间会出现一定的空隙。

效果图:

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body {

            margin: 0;

        }

        .box1,.box2 {

            width: 200px;

            height: 200px;

            border: 1px solid;

            display: inline-block;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>

</html>

原因:

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式(默认是normal,空白会被浏览器忽略)，HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

解决办法:

一、删除元素之间的空白符

缺点:代码可读性差

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body {

            margin: 0;

        }

        .box1,.box2 {

            width: 200px;

            height: 200px;

            border: 1px solid;

            display: inline-block;

        }

    </style>

</head>

<body>

    <div class="box1">box1</div><div class="box2">box2</div>

</body>

</html>

二、在父元素中设置font-size: 0,在子元素上重新设置正确的font-size

缺点：inline-block的元素必须设定字体大小，不然行内元素中的字体不会显示,且增加了代码量

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body {

            margin: 0;

            font-size: 0;

        }

        .box1,.box2 {

            width: 200px;

            height: 200px;

            border: 1px solid;

            display: inline-block;

            font-size: 16px;

        }

    </style>

</head>

<body>

    <div class="box1">box1</div>

    <div class="box2">box2</div>

</body>

</html>

三、为inline-block元素添加样式float:left

缺点:直接浮动就可以让一些元素在同一行显示,inline-block再浮动显得多此一举

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body {

            margin: 0;

        }

        .box1,.box2 {

            width: 200px;

            height: 200px;

            border: 1px solid;

            display: inline-block;

            float: left;

        }

    </style>

</head>

<body>

    <div class="box1">box1</div>

    <div class="box2">box2</div>

</body>

</html>

最后来张解决问题的效果图:

display:inline-block元素之间空隙的产生原因和解决办法的更多相关文章

  1. 行内块inline-block元素之间出现空白间隙原因及解决办法

    首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...

  2. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  3. 当li设置为line-block时，元素之间出现间隙的原因和解决方法

    原因 因为浏览器默认把inline元素之间的空白符(Tab.空格.换行)渲染成一个空格.而如下述代码,两个li元素之间的换行符被渲染成一个空格,则元素之间产生了间隙. 用Chrome浏览器将场景模拟出 ...

  4. Python3 Selenium定位不到元素常见原因及解决办法

    Python3 Selenium定位不到元素常见原因及解决办法 一.问题描述 在做web应用的自动化测试时,定位元素是必不可少的,这个过程经常会碰到定位不到元素的情况: 报错信息: no such e ...

  5. ios下元素溢出设置 overflow:auto; 不能滑动解决办法

    ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...

  6. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  7. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  8. 使用display inline-block 布局时，出现的间距问题的解决办法和相关说明

    在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行.而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 使用 display inline-b ...

  9. 子元素的margin-top影响父元素原因和解决办法

    这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...

随机推荐

  1. POI 生成excel

    POI生成原生Excel-工具类     https://www.jianshu.com/p/2dfe7fe7d02e JAVA poi 帮助类  https://www.cnblogs.com/Ca ...

  2. WebView内置方案主要是通过重写WebChromeClient 来实现的，如下面的代码所示。

    基本思想也很简单:通过WebChromeClient的方法以startActivityForResult的方式打开系统的文件选择器,选择文件后在onActivityResult中将结果回传给Webvi ...

  3. 如何把java项目打包成war包

    用Eclipse手动打包 右击工程名 选择Export… 选择Web → WAR file 点击Browse,选择导出路径 然后war包就被导出来啦~是不是很简单呢 利用Maven的package命令 ...

  4. 20175215 2018-2019-2 第四周Java课程学习总结

    第五章学习内容 1.子类的继承性 (1)子类和父类在同一包中的继承性 如果子类和父类在同一个包中,那么,子类自然地继承了其父类中不是private的成员变量作为自己的成员变量,并且也自然地继承了父类中 ...

  5. oracle数据库连接数反推公式

    sessions=1.1*processes+5,transactions=1.1*sessions.

  6. python MySQLdb 一个连接connection多个cursor

    使用MySQLdb时,如果创建一个连接connection,多个线程同时使用,会不会有问题? 在下文中,我们将模拟这种场景,看是否会出现问题. 1.示例 1.1 正常的情况 创建一个连接,两个线程同时 ...

  7. 什么是web语义化，有什么好处

    web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化.HTML语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 CSS命名的语义化是指 ...

  8. 四十五：数据库之SQLAlchemy之subquery实现复杂查询

    子查询让多个查询变成一个查询,只需要查找一次数据库,性能相对来讲更高效,不用写多个SQL语句就可以实现一些复杂的查询,在SQLAlchemy中要实现一个子查询,应该使用以下步骤:1.将子查询按照传统方 ...

  9. python学习笔记：（十）函数

    python中定义函数使用def关键字,一般格式如下: def 函数名(参数列表): 函数体 如: #无参数 def helloworld(): print("Hello World!&qu ...

  10. MyBatis框架原理3：缓存

    上一篇[MyBatis框架原理2:SqlSession运行过程][1]介绍了MyBatis的工作流程,其中涉及到了MyBatis缓存的使用,首先回顾一下工作流程图: 如果开启了二级缓存,数据查询执行过 ...