img和p之間的佈局出現的差距

它一定是簡單的我失蹤了，但對於我的生活無法弄清楚。 <img>和<p>之間有一個小的差距，但我沒有利潤率，所以我不知道它是什麼 - 某種靈魂可以幫助我嗎？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>

來源

2014-05-11 Poiple Shadow

您已經爲IMG和p標籤5像素的間距。 – JJJ

@Juhana不，這不是關於填充。它是空白的。檢查出來http://jsfiddle.net/LJrME/ – dfsq

這是內嵌/ inline-block的元素（在你的情況下圖像）的預期的行爲，他們尊重空格包括換行符。所以你看到他們。作爲一個簡單的修復，你可以嘗試定義顯示爲塊：

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

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

來源

2014-05-11 13:24:14 dfsq

我知道這將是簡單的事情 - 謝謝！作品一種享受 –

img和p之間的佈局出現的差距

回答

相關問題