CSS定位：使用负边距创建精确重叠偏差几个像素

Question

我有两个div，我希望使用负边距左边水平重叠。

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都是以换行符分隔的，因此它们具有较小的边距＆＃34;它们之间就像句子中的字母一样（这几乎是内联元素的重点）。

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

Answer 2

内联块有奇怪的错误＆＃34;您可以调用它，在元素之间应用4px空间，假设默认字体大小。这是根据您的div之间的换行符创建的。你会发现你可以通过使你的负面更高来解决这个问题。

margin-left: -104px;

这将解决您的问题，但它也不是解决问题的唯一方法。

---

你可以这样做......而不是：

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

删除div之间的换行符，这样它们就是：

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

这也将解决问题。

---

您也可以将其包含元素的font-size设置为0。

<强> HTML：

<div class="container">
<div id=one></div>
<div id=two></div>
</div>

<强> CSS：

.container { font-size: 0; }

但是等等！还有更多。你可以注释掉换行符。

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

---

您可以删除结尾＆gt;到下一个元素的开头。

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