CSS 定位 : Creating exact overlap with negative margin is off by several pixels

Question

我有 2 个 div，我想使用负 margin-left 在水平方向上完全重叠。

HTML:

<div id=one></div>
<div id=two></div>

CSS:

body{margin:0px;padding:0px,border:0px}

#one  {width:100px;height:100px;background-color:red;}
#two  {width:100px;height: 50px;background-color:blue;}

#one,#two{display:inline-block;}

#two{margin-left:-100px;}

在负边距之前每个 div 是 100px 宽:

在负边距之后，div 正好重叠 4px:

为什么在第二个 div 上设置负边距不会导致它与第一个 div 完全重叠？

顺便说一句，我只是在试验 margin-left...我知道我绝对可以将 2 个 div 放在相对包装器中。

提前感谢您的任何启发!

Answer 1

内联元素对其在 HTML 中的结构很敏感。由于两个 div 由换行符分隔，它们之间有一个小的“边距”，就像句子中的字母一样(这几乎是内联元素的要点)。

<div id=one></div> <!-- Here -->
<div id=two></div>

更改 HTML 的结构以删除此空格:

<div id=one></div><div id=two></div>

或者你可以使用注释来否定换行符:

<div id=one></div><!--
--><div id=two></div>