Css 删除div之间的空白

我的两个div之间有一些奇怪的空格

每个div都有css属性

display:inline block

，并且每个div都有一个设置的高度和宽度

我找不到空格在哪里

---

将两个元素都向左浮动，也将30%的宽度变为40%以填充所有空间，但这不是必需的。请注意，“内联块”不受IE7支持，但可以通过解决方法进行修复

---

因为div之间有空格，所以这里有空格。内联元素之间的空白被解释为空格

你有：

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div>
<div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

第一组
第2组

更改为：

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div><div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

第一组
第2组

然而，这是一种不好的方式来做你想做的事情

---

如果你想做的话，你应该浮动元素

将这些语句移到同一行：

</div><div id="right_side">

这就做到了：

<div id="left_side">
    ...
</div><div id="right_side">
    ...
</div>

...
...

请注意，右侧div是如何在左侧div的结束标记之后立即开始的。这是因为元素之间的任何空间（因为它们现在是内联的）都将成为布局本身中的空间。可以使用两个跨度图元镜像此行为

.

使用：

float:left;
clear:none;  

---

在这两个

div

中，尝试使用float而不是“inline block”，没有问题。刚刚将display:inline块更改为：

#left_side {float: left;}

及

---

没有明显的问题。可能是错误的。

仅将此添加到CSS中

h1 {
    padding:0;
    margin:0;
   }

---

div之间的空格仅由h1边距和填充引起

如果要保留编码布局，请避免浮动，并将每个div完全保留在自己的行上

---

此处有些内容此处有些更多内容

不知道为什么，但我通过添加

边框解决了此问题：1px实心红色（垂直）和
浮动：左侧（水平）到相关的DIV样式语句，并删除空格。
您还可以添加
display:flex
到divs的父容器（在本例中为
body
）
 最好的方法是将父元素的字体大小设置为0，然后将父元素内的子元素的正常字体大小设置为0（否则将从父元素继承零）
父div设置为font size:0px，chiilds设置为所需的大小，如17px:）
当然，这是另一个选项。虽然需要注意的是，浮动的元素应该被清除。这很好，但并不能回答OP的问题。这确实是一个关于问题的评论，而不是一个答案。你完全正确，我有点错过了这一点。别担心，我正在为你恢复平衡。：）现在，您的网站首选%宽度和高度，以便在所有设备上完美运行。已编辑。我的评论（大约4年前）是在“液体布局”是一个糟糕的设计选择的时候发表的。现在的%宽度/高度适用于响应性强的网页设计。先生，您是一位传奇人物！！浮动和内联块（以及表格单元格和灵活的方框）是根本不同的东西。这四种技术可能都适用于项目的水平对齐，但它们有不同的局限性和缺点。从理论上讲，FlexBox似乎是这四种浏览器中最通用的一种，但浏览器对最新规范版本的支持仍然相当有限。因为这个问题与
display:inline block
有关，我宁愿建议
display:inline flex
。我支持这一点，@sunny如果你有两个没有填充的div，并且彼此相邻，那么有两种情况：a）如果html被最小化（标记之间没有空格），那么div将是相邻的。b） 如果只有一个空格/制表符/回车符，则浏览器会在这些div之间显示一个小空格。您的回答没有回答用户的问题。我花时间写了一个小的解释，以便你能理解其中的区别。荣誉
h1 {
    padding:0;
    margin:0;
   }