首先这里的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. Spring源码 09 IOC refresh方法4

    参考源 https://www.bilibili.com/video/BV1tR4y1F75R?spm_id_from=333.337.search-card.all.click https://ww ...

  2. Android OOM 问题探究 -- 从入门到放弃

    一.前言 最近客户反馈了一些OOM的问题,很早之前自己也有简单了解过OOM的知识,但时间久远,很多东西都记不清了. 现在遇到这个OOM问题,也即趁此搜索了一些资料,对OOM问题做一些探究,把资料记录于 ...

  3. html网页乱码原因以及解决办法

    一.乱码造成原因 1.如果网页源代码是gbk编写的,而内容中的文字是utf-8的,那么,此时打开浏览器就会出现HTML乱码.反之也会出现乱码. 2.HTML网页编码是gbk,但是程序从程序库中调出呈现 ...

  4. 【MySQL】从入门到掌握4-主键与Unique

    上期:[MySQL]从入门到掌握3-WorkBench 第一章:主键 在实际开发中,我们不会使用用户名字当作主键.   因为当我们用数据库记录学生信息的时候,学生有可能重名! 我们一般会使用是个int ...

  5. 踩坑，发现一个ShardingJdbc读写分离的BUG

    ShardingJdbc 怎么处理写完数据立即读的情况的呢? 写在前面 我本地使用了两个库来做写库(ds_0_master)和读库(ds_0_salve),两个库并没有配置主从. 下面我就使用库里的 ...

  6. 域名+端口号 访问minio服务问题

    业务上需要用到分布式文件服务,选择了minio作为文件服务的组件,搭建好服务后使用IP+端口号(http://xx.xx.xx.xx:9001)的形式访问在所有环境下都没有问题. 上线部署时出于正规和 ...

  7. Windows 系统 PostgreSQL 手工安装配置方法

    自从2020年底开始接触 PostgreSQL 以来就喜欢上了这个数据库,个人感觉比 MySQL 好用,多表联合查询性能好很多,同时也不存在 SQLServer 的版权授权费用问题.搭配 .NET 开 ...

  8. 第九篇:vue条件语句

    好家伙,终于有个简单了的 v-if    条件判断 <div id="app"> <p v-if="seen">现在你看到我了</ ...

  9. ASP.NET Core 6框架揭秘实例演示[35]：利用Session保留语境

    客户端和服务器基于HTTP的消息交换就好比两个完全没有记忆能力的人在交流,每次单一的HTTP事务体现为一次"一问一答"的对话.单一的对话毫无意义,在在同一语境下针对某个主题进行的多 ...

  10. KingbaseES R3 集群删除test库导致主备无法切换问题

    案例说明: 在KingbaseES R3集群中,kingbasecluster进程会通过test库访问,连接后台数据库服务测试:如果删除test数据库,导致后台数据库服务访问失败,在集群主备切换时,无 ...