为什么在元素上设置内边距会影响同一 div 中的所有同级元素

Question

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

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

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

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

我尝试过display:table/table-cell，没有区别。我一开始没有在容器 div 中放置图像，结果是一样的。垂直对齐：顶部似乎没有帮助。看起来与 padding 或 margin 是一样的。

我真的不想诉诸绝对/相对位置，因为我认为应该有一种简单设置填充的方法。

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/