Question

这一定是我想念的简单事物，但是对于我的生活来说无法理解。 <img>和<p>之间存在一个小差距，但我的边距为零，所以我不知道它是什么 - 某种善良的灵魂可以帮助我吗？

CSS

.PlaceCard   { width: 100%; height: auto; }
.PlaceCard a { width: 100%; height: 100%; background:white; display: block; 
               -webkit-box-sizing: border-box; 
               -moz-box-sizing: border-box; box-sizing: border-box; 
                border: 1px solid #bbb;  }
.PlaceCard img, .PlaceCard p  { background:#03F; width: 100%; height:auto; 
                                padding:5px; margin:0;  
                                -webkit-box-sizing: border-box; 
                                -moz-box-sizing: border-box; 
                                box-sizing: border-box; 
                                border: 0px solid #bbb; }
.PlaceCard a:hover { background:#0F3;}
.PlaceCard p img { display:inline-block; padding:0; padding-right:10px; 
                   float:left; max-width:50px; max-height:50px; }

HTML

<div class="PlaceCard"><a href="Cost-of-Living-in-Goa-India.htm">
    <img src="Images/Cost-Of-Living.jpg" alt="Cost of Living India Goa" 
         width="375" height="300">
        <p>
             <img src="Images/Google.png" width="60" height="60" alt=""/>
             Cost Of Living<br>(GOA)
        </p>
</a>
</div>

Answer 1

这是内联/内联块元素（在您的情况下为图像）的预期行为，它们尊重包含换行符的空格。所以你看到了他们。作为一个简单的修复，您可以尝试将显示定义为块：

.PlaceCard img, .PlaceCard p {
    ...
    display: block;
}

演示：http://jsfiddle.net/LJrME/

在img和p之间的布局中出现差距

1 个答案: