首先这里的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. Linux 02 基本命令

    参考源 https://www.bilibili.com/video/BV187411y7hF?spm_id_from=333.999.0.0 版本 本文章基于 CentOS 7.6 工具 清屏 cl ...

  2. SPI：Java的高可扩展利器

    摘要:JAVA SPI,基于接口的编程+策略模式+配置文件的动态加载机制. 本文分享自华为云社区<一文讲透Java核心技术之高可扩展利器SPI>,作者: 冰 河. SPI的概念 JAVA ...

  3. Java开发学习(二十六)----SpringMVC返回响应结果

    SpringMVC接收到请求和数据后,进行了一些处理,当然这个处理可以是转发给Service,Service层再调用Dao层完成的,不管怎样,处理完以后,都需要将结果告知给用户. 比如:根据用户ID查 ...

  4. java数组---多维数组

    多维数组 多维数组可以看成是数组的数组 比如二维数组就是一个特殊的一维数组,其每一个元素都是一个一维数组. 二维数组 public static void main(String[] args) { ...

  5. ipad好伴侣

    https://museapp.com/ Muse是用于研究笔记,阅读,草图,屏幕截图和书签的空间画布.

  6. KingbaseES V8R6 锁等待检测

    背景 对于多数数据库,dba技能之一就是查找锁.锁的存在有效合理的在多并发场景下保证业务有序进行.下面我们看一下KingbaseESV8R6中查找阻塞的方法. 1.找到"被阻塞者" ...

  7. Java开发学习(三十一)----Maven属性与版本管理

    一.属性 1.1 问题分析 如下图所示 你会发现,如果现在想更新Spring的版本,你会发现依然需要更新多个jar包的版本,这样的话还是有可能出现漏改导致程序出问题,而且改起来也是比较麻烦. 问题清楚 ...

  8. Windows 11 新材质 Mica Alt 效果展示

    本文是 WinUI 3 踩坑记 的一部分,该系列发布于 GitHub@Scighost/WinUI3Keng,若内容出现冲突以 GitHub 上的为准. 微软在 2022-09-02 更新了官方文档, ...

  9. 2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

    HTML5 第一天 一.什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一 ...

  10. GitLab基础知识

    GitLab基本介绍 GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目. 与Github类似,GitLab ...