Question

我想在div中显示两张图片，其中一张位于顶部，一张位于底部。

我已经实现了这一点，但似乎有额外的空间，特别是在底部，我不知道它来自何处。当我使用Firebug布局时，它显示61像素的高度，但我的图像只有18x16，我认为不包括填充和边距，在任何情况下只有几个像素。

我做错了什么？有更好的方法吗？

<div class="ex6">
  <img src="images/uparrow.png" align="top" id="Z6Sync" width="18" height="16" title="up" onclick="manualup()" alt="up"><p>
  <img src="images/downarrow.png" id="Z6Sync" width="18" height="16" title="up" onclick="manualup()" alt="down">
</div>

CSS

div.ex6
{
  padding-top:5px;
  padding-bottom:1px;
  padding-right:10px;
  padding-left:10px;
  border:2px;
  font-size:0.7em;
  border-style:solid;
  border-color:#ddd;
  margin-top: 8px;
  margin-bottom: 2px;
  overflow: hidden;
  float:right;
  background: #eee;
  cursor:pointer
}

Answer 1

您的问题出在第一张图片后添加的<p>标记中。段落具有固定样式，包括段落后的边距/填充。摆脱它，并注意通过CSS添加换行符，以确保图像显示在另一个下面。

要实现此目的，您可以将图像内部的图像设置为块元素：

div.ex6 img { display: block }

如果你这样做，你将不得不添加更多的样式，以增加更多的边距，尤其是图像之间。你可以这样做：

div.ex6 img:first-child { margin-bottom: 5px }

但也有很多其他方法，包括仅使用<br />代替<p>。我个人不喜欢使用手动换行来进行定位。

使用较少的填充在上方和下方显示一个图像

1 个答案: