Question

在这个小提琴中，我有一堆div，一个输入和一些内联显示的图像。我想将图像向下移动一点，使其看起来很好地对齐，但是当我应用填充或边距时，它只是按下容器内的每个元素。

<div class="rs-paging">
    <div class="rs-pageclick">
        <img class="rs-selectfirst" src="http://findicons.com/files/icons/2296/fidelity/32/arrow_left.png" alt="" title="First Page">
    </div>



.rs-pageclick img {
    cursor:pointer;
    display: inline-block;
    margin-top: 15px;
}

http://jsfiddle.net/paull3876/qds8pnfx/2/

我试过显示：table / table-cell，没什么区别。我开始没有容器div中的图像，这是一样的。 vertical-align：top似乎没有帮助。并且它与填充或边距相同。

我真的不想诉诸绝对/亲戚的位置，因为我认为应该有一种简单设置填充的方法。这让我疯了！

感谢

Answer 1

元素都设置为display: inline-block;。当您给其中一个元素margin-top时，将整行向下推。

您是否尝试让物品垂直对齐？如果是这样，您可以在vertical-align: middle;元素上使用inline-block。

http://jsfiddle.net/nea4w6h3/1/

Answer 2

使用overflow:hidden并修复div的高度似乎适用于你的请求（我添加了一个包含所有文本的div）：

https://jsfiddle.net/qds8pnfx/5/

为什么在元素上设置填充会影响同一div中的所有兄弟节点

2 个答案: