html - 由于其中一个 div 内的图像元素，无法在两个 div 之间创建相等的间隙

Question

看这张图可能会让事情变得清楚..

小提琴

主容器是一个 div，其中还有 5 个 div，每个 div 都保存一些数据。

如果该数据的计数为 0，则只显示文本。如果计数大于 0 ，则显示计数和图像嵌套在跨度内，并且图像和数字是可点击的...

第二张图片是显示 div 内的文本是如何呈现的。

由于第 3 和第 5 div 中的图像 ，div 之间的差距不一致。即使将图像设置为position:relativeand position:absolute，设置 left 和 top 属性似乎也没有影响..

有人可以在这种情况下帮助我吗..

HTML

<div id="prop">
   <div id="lvl1" class="alrt">
      Missing reads within 1 week : <span data-tr="1">0</span>
   </div>
   <div id="lvl2" class="alrt">
      Latest reads 1 Week or older : <span data-tr="2">0</span>
   </div>
   <div id="lvl3" class="alrt">
      Occupied Zero Consumption : <span data-tr="3"><a>39 <img src="../icon1.png" title="" /></a></span>
   </div>
   <div id="lvl4" class="alrt">
      Negative Consumption : <span data-tr="4">0</span>
   </div>
   <div id="lvl5" class="alrt">
      Vacant Consumption: <span data-tr="5"><a>5 <img src="../icon2.png" title="" /></a></span>
   </div>
   <div class="msg">
      *all alerts are based on yesterdays reads
   </div>
</div>

CSS

#prop
{
    height:55%;
    padding-top:10px;
    border:solid 2px #B2CD48;
    border-radius:10px;
    margin:10px 0 10px 15px;
}

#prop > .alrt 
{
    width:80%;
    float:right;
    height:12%;
    font-weight:700;
    font-size:1em;
    color:#42456B;
    padding:3px;
}

.alrt a 
{
    cursor:pointer;
    position:relative;
}

.alrt > span > a > img 
{
    width:20px;
    height:20px;
    position:relative;
    top:3px;
}

Answer 1

尝试将其用于 .alrt > span > a > img

.alrt > span > a > img
{
    width: 20px;
    height: 20px;
    position: absolute;
    top: -3px;
}