首先这里的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. 树莓派4B无屏幕连接Wi-Fi/启用ssh/创建用户

    前边总得说点什么 最近每次在Win10上写代码需要启动Redis,残血Redis For Windows有卡死系统的bug.由于主机内存不大够用(已经扩到顶了),开虚拟机运行Redis更别提了..想起 ...

  2. LeetCode 593. 有效的正方形（向量做法）

    题目 题目链接:593. 有效的正方形 题意:给出二维平面上四个点的坐标,判断这四个点是否能构成一个正方形,四个点的输入顺序不做任何保证. 思路 通过向量运算可以很轻松地解决这道题.任取一点向其他三点 ...

  3. Ubuntu20.04配置 ES7.17.0集群

    Ubuntu20.04配置 ES7.17.0集群 ES能做什么? elasticsearch简写es,es是一个高扩展.开源的全文检索和分析引擎,它可以准实时地快速存储.搜索.分析海量的数据. Ubu ...

  4. 在 C# CLR 中学习 C++ 之了解 namespace

    一:背景 相信大家在分析 dump 时,经常会看到 WKS 和 SRV 这样的字眼,如下代码所示: 00007ffa`778a07b8 coreclr!WKS::gc_heap::segment_st ...

  5. 项目实践2:(问卷)用html和css做一个网页

    好家伙,又来写项目了 1.以下是考题,姑且把他理解为甲方吧. 2.以下是附带的题目素材 开干.

  6. FusionCopmpute之CNA，VRM虚拟机安装

    CNA和VRM安装步骤一样,需要修改的只有IP 按步骤创建 修改自己虚拟机想要存放的位置 需要把自己网络同样配置为仅主机(提前配好) 自己也可以修改至200G 虚拟机只是用多少取多少 CNA可以设置为 ...

  7. ASP.NET MVC 对于视图引擎的优化

    我经常使用asp.net MVC框架来做网站.总的来说,MVC框架是一个非常优秀的框架.相对于曾经的web form模式,我个人感觉分工更加合理思路也更加清晰,但是交给开发人员的工作也相对变多了. 当 ...

  8. Java八股文纯享版——篇②：并发编程

    注: 1.笔记为个人归纳整理,尽力保证准确性,如有错误,恳请指正 2.写文不易,转载请注明出处 3.本文首发地址 https://blog.leapmie.com/archives/c02a6ed1/ ...

  9. LFS（Linux From Scratch）构建过程全记录（四）：最后的准备

    写在前面 本章将进行一系列的环境配置 目录创建 在LFS中创建文件目录 我们可以用以下的指令来创建一些基础的目录,并进行连接 mkdir -pv $LFS/{etc,var} $LFS/usr/{bi ...

  10. 分布式链路追踪体验-skywalking入门使用

    背景 旁友,你的线上服务是不是偶尔来个超时,或者突然抖动一下,造成用户一堆反馈投诉.然后你费了九牛二虎之力,查了一圈圈代码和日志才总算定位到问题原因了.或者公司内部有链路追踪系统,虽然可以很轻松地通过 ...