为什么没有应用保证金时，此图像会占用一些余量？

Question

我在锚标记中拍摄了两张图片。当我不提供保证金时，它显示在相同的计划/级别中，这很好。

#one{
    margin:0px;
     border:1px solid red
}

但是当我给第一张图像留下边距时，它会下降。很好。但是为什么第二张图像会降下来。我没有给第二张图像留下任何余量？它应该显示与第一个相同的级别。

#one{
    margin:100px;
     border:1px solid red
}

换句话说，我没有给第二张图片留任何余量，但是它显示在第二张图片的下方？当保证金 zeopPX

时，为什么它不会与第一张图像一起显示

http://jsfiddle.net/8u640djs/2/

Answer 1

这是因为你给第一张图片的所有边 100px边距。因此，右边距和下边距正在影响第二张图像。

要说明此行为，请调整边距缩写以包含所有值：

margin: 100px 100px 100px 100px;

然后将一个值更改为0并进行测试，并对每个值重复。你会看到发生了什么。

DEMO：http://jsfiddle.net/8u640djs/3/

Answer 2

这是因为a元素在底部垂直对齐。添加

a{ vertical-align: middle; display: inline-block; }

演示：http://jsfiddle.net/8u640djs/6/

Answer 3

您必须更改vertical-align

的img标记的对齐方式

#one{
    margin:100px;
    border:1px solid red;
    vertical-align: middle; 
}