php - 垂直对齐 css 元素更靠近图像

Question

我有一个提供随机图像的页面。图片下方是一个 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;
}

randimg.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 无法显示元素。

Answer 1

<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