垂直对齐 CSS 元素，使其更接近图像 - vertically align css element closer to image

我有一个提供随机图像的页面。图像下方是一个CSS元素，允许您对图像进行向上或向下投票，但是，我认为CSS在图像下方有点太低了。我希望它垂直靠近图像。你能帮忙吗？

风格.css：

.vot_updown2 {
 position:relative;
 margin:3px;
 width:160px;
 background:#ffffff;
 border:0px solid #ffffff;
 font-family:"Segoe UI", Arial, sans-serif;
 text-align:center;
 padding:2px 1px;
 box-shadow:.17em .2em .23em #ffffff;
 -webkit-box-shadow:.17em .2em .23em #ffffff;
 -moz-border-radius:.7em;
 -webkit-border-radius:.7em;
 -khtml-border-radius:.7em;
 border-radius:.7em;
}

兰迪姆.php片段：

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        echo "<p>", "<div class='tagtext'>AUTHOR: ", ($row['username']), " ", "TAG: ", ($row['tag']), "</div>";
        echo "<p>", '<img src="' . $row['image'] . '" alt="" />', "<br>";
echo "<div class='vot_updown2' id=" . 'vt_' .$table.($row['id']). "></div>";
    }

我尝试删除换行符，但无济于事。尝试使用 span 而不是div 无法显示元素。

<p>标签具有默认边距值，您可以调整第二个<p>底部的边距以使vote_updown2 <div>更接近它，如下所示：

将类添加到映像容器 Ex. image_container ：

echo "<p class='image_container'><img src='" . $row['image'] . "' alt='' /></p>";

然后将 CSS 属性添加到容器中，并根据需要调整下边距：

.image_container
{
    margin-bottom: 0; //adjust as required
}

js.fiddle

将其添加到.vot_updown2：

   margin-top:-10px;

您可以将 10px 更改为

你想要的一切。

您可以通过为 img 元素提供"display：block"或"float：left"样式声明来删除图像下方多余的空白区域。请参阅删除 image