img鏈接下的額外空間。垂直對齊，行高：0不修復。

Question

嘗試對齊容器底部的div中的img ...除了出現一個不可思議的空間！我搜索周圍的答案只能找到display:block和line-height:0 ...但他們不工作！有任何想法嗎？

HTML：

<div id="container"> 

    <div id="block"> 
     <a href="home.html"><img src="Thumbs/coffeecup.JPG" width="95" height="80" 
     alt="COFFEE CUP JPG" title="" /></a> 

    </div> 

</div> 

CSS：

#container {width:500px; 
      height:500px; 
      border:solid 1px; 
      border-color:#000000; 
      margin: 0 auto; 
      position:relative; } 

#block {width:100px; 
     height: 100px; 
     border:solid 1px; 
     border-color:#000000; 
     position:absolute; 
     left:0; 
     bottom:0; 
     } 

img {vertical-align:bottom; 
    display:block; 
    line-height:0; 
    } 

Code

我已經嘗試了所有其他職位的例子。不知道發生了什麼！

Answer 1

你div有width 100px和height 100px，但你的形象的高度爲80px和寬度僅爲95px。因此，白色的空間。只要刪除屬性width:100px和height:100px的#block，空白就會消失。