Question

我创建了一个超级简单的html和css文件来测试显示：inline-block，但是当我测试它时，盒子之间有一些不需要的空间......
HTML：

<!doctype html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Mall.css" rel="stylesheet" />
</head>
<body>
    <div style="background-color:red;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:yellow;"></div>
</body>
</html>

CSS：

body {
    padding: 0px;
    margin: 0px;
    width: 100%;
}

div {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 50px;
    height: 50px;
}

我从div标签和body标签中删除了所有填充和边距，但是当我在chrome中运行html时会产生以下结果： div之间有3个像素，5个像素位于它们之间，所以当它应该只有50时，身体的总高度是55像素。

imgur

我找到了一种奇怪的方法来解决这个问题，这让我觉得这是webbrowser而不是代码的问题，如果我将CSS更改为display: block它会在对角线中显示我的div正常在它们之间划出并清除任何奇怪的空格。现在，如果我打开chrome中的开发人员工具并将其中一个div的样式更改为inline-block，则它们全部排成水平，并清除任何不需要的空格。

image-tag

任何人都知道它为什么会这样？

Answer 1

您必须删除div关闭和打开之间的空格。

<强> HTML：

 <div style="background-color:red;"></div><div style="background-color:blue;"></div><div style="background-color:green;"></div><div style="background-color:yellow;"></div>

<强> CSS：

body {
    padding: 0px;
    margin: 0px;
    width: 100%;
}

div {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 50px;
    height: 50px;
}

fiddle

Answer 2

Chris coyier在这里处理这个空格有很多解决方案：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

简短回答：

从

更改您的HTML代码

<body>
    <div style="background-color:red;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:yellow;"></div>
</body>

到

<body>
    <div style="background-color:red;"></div><div style="background-color:blue;">
    </div><div style="background-color:green;">
    </div><div style="background-color:yellow;"></div>
</body>

这就是内联元素的行为方式。即你在代码中不应该有空格，以防止它们在渲染时显示空格/边距。

使用display时不需要的空格：inline-block

3 个答案: