首先这里的div设置为了行内块元素，span本身为行内元素，并且设置了* {padding: 0; margin: 0;}，那怎么清除元素之间的空白缝隙呢？？

（1）给元素加浮动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .parent {

            width: 200px;

            height: 100px;

            margin-top:20px;

            margin-left:20px;

            border: 1px solid #000;

        }

        .parent div {

            width: 50px;

            height: 50px;

            display: inline-block;

            float:left;

        }

        .parent div:nth-child(1) {

            background-color: pink;

        }

        .parent div:nth-child(2) {

            background-color: skyblue;

        }

        .parent div:nth-child(3) {

            background-color: yellow;

        }

        .span_parent {

            border: 1px solid #000;

            margin-left:20px;

            width: 200px;

            height: 100px;

            margin-top:20px;

        }

        .span_parent span {

            float: left;

        }

        .span_parent span:nth-child(1) {

            background-color: pink;

        }

        .span_parent span:nth-child(2) {

            background-color: skyblue;

        }

        .span_parent span:nth-child(3) {

            background-color: yellow;

        }

    </style>

</head>

<body>

    <!-- position:absolute或position:fixed -->

    <div class="parent">

        <div>div1</div>

        <div>div2</div>

        <div>div3</div>

    </div>

    <div class="span_parent">

        <span>span1</span>

        <span>span2</span>

        <span>span3</span>

    </div>

</body>

</html>

（2）把所有的元素标签都写到一行上

<body>

    <div class="parent">

        <div>div1</div><div>div2</div><div>div3</div>

    </div>

    <div class="span_parent">

        <span>span1</span><span>span2</span><span>span3</span>

    </div>

</body>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .parent {

            width: 200px;

            height: 100px;

            margin-top:20px;

            margin-left:20px;

            border: 1px solid #000;

        }

        .parent div {

            width: 50px;

            height: 50px;

            display: inline-block;

            /* float:left; */

        }

        .parent div:nth-child(1) {

            background-color: pink;

        }

        .parent div:nth-child(2) {

            background-color: skyblue;

        }

        .parent div:nth-child(3) {

            background-color: yellow;

        }

        .span_parent {

            border: 1px solid #000;

            margin-left:20px;

            width: 200px;

            height: 100px;

            margin-top:20px;

        }

        .span_parent span {

            /* float: left; */

        }

        .span_parent span:nth-child(1) {

            background-color: pink;

        }

        .span_parent span:nth-child(2) {

            background-color: skyblue;

        }

        .span_parent span:nth-child(3) {

            background-color: yellow;

        }

    </style>

</head>

<body>

    <!-- position:absolute或position:fixed -->

    <div class="parent">

        <div>div1</div><div>div2</div><div>div3</div>

    </div>

    <div class="span_parent">

        <span>span1</span><span>span2</span><span>span3</span>

    </div>

</body>

</html>

（3）给其父元素加入“font-size:0px;”

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .parent {

            width: 200px;

            height: 100px;

            margin-top:20px;

            margin-left:20px;

            border: 1px solid #000;

            font-size:0px;

        }

        .parent div {

            width: 50px;

            height: 50px;

            display: inline-block;

            font-size:14px;

            /* float:left; */

        }

        .parent div:nth-child(1) {

            background-color: pink;

        }

        .parent div:nth-child(2) {

            background-color: skyblue;

        }

        .parent div:nth-child(3) {

            background-color: yellow;

        }

        .span_parent {

            border: 1px solid #000;

            margin-left:20px;

            width: 200px;

            height: 100px;

            margin-top:20px;

            font-size:0px;

        }

        .span_parent span {

            /* float: left; */

            font-size:14px;

        }

        .span_parent span:nth-child(1) {

            background-color: pink;

        }

        .span_parent span:nth-child(2) {

            background-color: skyblue;

        }

        .span_parent span:nth-child(3) {

            background-color: yellow;

        }

    </style>

</head>

<body>

    <div class="parent">

        <div>div1</div>

        <div>div2</div>

        <div>div3</div>

    </div>

    <div class="span_parent">

        <span>span1</span>

        <span>span2</span>

        <span>span3</span>

    </div>

</body>

</html>

两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？的更多相关文章

  1. 图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题

    图片.文字混排: 不管图片和文字的前后位置,都要给 图片 设置 vertical-algin,而不是谁在前面给谁设置. 此方法兼容IE7+ 和其它主流浏览器.IE7-没有测. inline-block ...

  2. html书写行内元素时-tab和换行会在行内元素间引入间距

    目录 html文本中的控制字符会被解析为文本节点 书写行内元素时,换行符LF与水平制表符HT会引入莫名的元素间间隔 其他控制字符是否会引入间距的验证 html文本中的控制字符会被解析为文本节点 举例: ...

  3. html 行内元素和块级元素

    行内元素一般是内容的容器,而块级元素一般是其他容器的容器.一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行:而块级元素可以包含行内元素 ...

  4. img 默认是行内元素，它旁边的空格是会保留的

    img 默认是行内元素,它旁边的空格是会保留的.因此图片宽度设置百分百后下面会有点找不出原因的间隙. 解决办法:img{display:block}

  5. HTML的块级元素和行内元素

    行内元素一般是内容的容器,而块级元素一般是其他容器的容器.一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行:而块级元素可以包含行内元素 ...

  6. CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法

    我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...

  7. html元素两种分类。替换元素和不可替换元素；块级元素和行内元素

    根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...

  8. HTML 行内元素和块级元素的理解及其相互转换

    块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...

  9. CSS学习笔记——盒模型，块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

随机推荐

  1. Python 工匠：一个关于模块的小故事

    前言 模块(Module)是我们用来组织 Python 代码的基本单位.很多功能强大的复杂站点,都由成百上千个独立模块共同组成. 虽然模块有着不可替代的用处,但它有时也会给我们带来麻烦.比如,当你接手 ...

  2. 【漏洞分析】KaoyaSwap 安全事件分析

    相关信息 KaoyaSwap 是 BSC 链上的一个自动做市商 AMM.然后,现在他们的官网 https://www.kaoyaswap.com/ 已经打不开了(如果我打开方式没错的话).所以就直接进 ...

  3. 「学习笔记」倍增思想与lca

    目录 ST表 算法 预处理 查询 关于 log2 Code 预处理 查询 例题 P2880 P2048 lca 树上 RMQ 前置知识:欧拉序列 算法 Code 离线 Tarjan 算法 Code 倍 ...

  4. windows优化原神

    原神3.0新地图很卡顿? 锐距显卡带不动? 看一下我的配置 英特尔i5-1135G7 内存16GB可以拓展32GB 固态512GB 原神优化前帧率50左右 优化后59-60最差55 展示图原神设置图 ...

  5. OpenJudge1.5.17

    20:球弹跳高度的计算 总时间限制: 1000ms 内存限制: 65536kB 描述 一球从某一高度落下(整数,单位米),每次落地后反跳回原来高度的一半,再落下. 编程计算气球在第10次落地时,共经过 ...

  6. 一次较波折的MySQL调优

    春节长假某日,阳光明媚,春暖花开,恰逢冬奥会开幕,想着一定是一个黄道吉日,必能顺风顺水.没想到却遇到一个有点小波折 的客户报障. 01故障起因 故障起因是客户前一天从自建MySQL迁移到云上RDS,在 ...

  7. 【读书笔记】C#高级编程 第六章 数组

    (一)同一类型和不同类型的多个对象 如果需要使用同一类型的多个对象,就可以使用数组或集合(后面章讲). 如果需要使用不同类型的多个对象,可以使用Tuple(元组)类型. (二)简单数组 如果需要使用同 ...

  8. OpenFOAM编程 | Hello OpenFOAM

    写在前面 OpenFOAM 是一个非常好用的开源程序包,笔者一直在研究和使用,其编程语言是笔者非常喜欢使用的 C++.但是笔者不是很喜欢 OpenFOAM 自己的构建工具 wmake,更倾向于使用 C ...

  9. Jmeter处理响应报文中文乱码

    Jmeter在访问发送请求的时候,响应内容如果有中文可能会显示乱码,原因应该是响应页面没有做编码处理,jmeter默认按照ISO-8859-1编码格式进行解析.而我们的响应报文却是utf-8的格式,所 ...

  10. 如何为 SAST 工具设置误报基准？

    许多 SAST 工具都无法避免误报的问题.这些工具经常报告一些实际不存在的漏洞,这种不准确性让安全团队耗费大量时间来对误报进行分类和处理,这时设置误报基准就显得十分必要. 通过设置误报基准,安全团队可 ...