首先这里的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. LuoguP1516 青蛙的约会 （Exgcd）

    #include <cstdio> #include <iostream> #include <cstring> #include <algorithm> ...

  2. java学习第一天.day04

    顺序结构 代码里没有流程控制,程序是按照书写的格式从上而下一行一行执行的, 一条语句执行完之后继续执行下一条语句,中间没有判断和跳转,直到程序的结束. 选择结构 选择结构也被称为分支结构.代码根据逻辑 ...

  3. CPU性能优化干货总结

    一.背景 部门成立专项组,对数智平台和站务系统做性能优化,其中目标之一为降低服务端硬件成本,即在32G内存.CPU银牌的配置下,能支撑1万+发客量.要达到此目标,需通过压力测试并配合监控系统,以QPS ...

  4. ubuntu 连不上网怎么办？

    [简洁版本] ctrl+alt+delete -> 任务管理器 ->"服务"选项卡 -> 运行"VMnet""VMware" ...

  5. 批处理（bat）命令修改xml模板数据

    给定一个模板,然后通过bat修改某个节点中的值 模板如下: <?xml version="1.0" encoding="UTF-16"?> < ...

  6. 「题解报告」P2154 虔诚的墓主人

    P2154 虔诚的墓主人 题解 原题传送门 题意 在 \(n\times m\) 一个方格上给你 \(w\) 个点,求方格里每个点正上下左右各选 \(k\) 个点的方案数. \(1 \le N, M ...

  7. AtCoder Beginner Contest 264（D-E）

    D - "redocta".swap(i,i+1) 题意: 给一个字符串,每次交换相邻两个字符,问最少多少次变成"atcoder" 题解: 从左到右依次模拟 # ...

  8. Windows平台Unity3d播放多路RTMP或RTSP流

    好多开发者在做AR.VR或者教育类产品时,苦于如何在windows平台构建一个稳定且低延迟的RTSP或者RTMP播放器,如果基于Unity3d完全重新开发一个播放器,代价大.而且周期长,不适合快速出产 ...

  9. Java开发学习(三十)----Maven聚合和继承解析

    一.聚合 分模块开发后,需要将这四个项目都安装到本地仓库,目前我们只能通过项目Maven面板的install来安装,并且需要安装四个,如果我们的项目足够多,那么一个个安装起来还是比较麻烦的 如果四个项 ...

  10. 手写tomcat——编写一个echo http服务器

    核心代码如下: public class DiyTomcat1 { public void run() throws IOException { ServerSocket serverSocket = ...