关于两个DIV之间的空白字符

首先！！！！这个问题应该是去面试前端会经常问到的问题！！！

如，下面这个例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>独秀不爱秀</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 1024px;
            height: 2000px;
            margin: 0 auto;
        }
        .container > div {
            display: inline-block;
        }
        .left {
            width: 80%;
            height: 100%;
            background-color: red;
        }
        .right {
            width: 20%;
            height: 100%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

按照正常思维的话，这个.container容器分成了左右红色和绿色两个部分，但是运行之后却装不下这两个子元素.left 和 .right。

效果如下图所示：

想要解决这种现象有两个办法：

将两个div如下放置：（注意！！！虽然效果实现了，但是这样治标不治本，当自动格式化代码时又会回到原来的样子，显得麻烦）
```
<div class="container">
        <div class="left"></div><div class="right"></div>
    </div>
```

给父容器.container 加上 font-size:0:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>独秀不爱秀</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 1024px;
            height: 2000px;
            margin: 0 auto;
            font-size: 0;
        }
        .container > div {
            display: inline-block;
        }
        .left {
            width: 80%;
            height: 100%;
            background-color: red;
        }
        .right {
            width: 20%;
            height: 100%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果最终显示：

关于两个DIV之间的空白字符

猜你喜欢