html - 通过将两个图像相互放置 CSS 在行尾出现意外间距

Question

我正在尝试使用 CSS 将一张图片放在另一张图片上。那很好用。但是我遇到了一个问题，即在我的段落的第一行末尾有意外的间距。我不知道如何解决这个问题。我希望有人能帮助我。 http://jsfiddle.net/76j8W/1/

我的 html 看起来像这样:

<img id="firstpic" src="http://images7.alphacoders.com/407/407975.jpg" />
<img id="duck" src="http://clipartist.info/openclipart.org/2011/Sept/Sep2011_Art/rubber_duck-1331px.png " />
<p> sometext </p>

我的 CSS 是这样的:

#firstpic{
width:100%;
padding:0;
margin:auto;
}


#duck{
 width:45px;
 position: relative;
 z-index:999;
 top:-50px;
 float:right;
}

p{
text-align:justify; 
}

Answer 1

代替

top: -50px

使用

margin-top: -50px;

fiddle 示例:http://jsfiddle.net/yMv9L/

margin-top 设置元素与其他元素的距离，因此此属性也会影响周围的元素(段落，在给定的示例中)。当您在 relative 位置更改元素的位置并使用 top 移动它时，它会从其原始位置“翻译”，但元素留下的空间是仍然从其他元素看到(好像它处于静止位置)

---

效果