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

首先这里的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>

View Code

（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>

View Code

（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>