Question

尝试在容器左下角的img左右对齐div ...除了神奇的空间出现了！我只是为了找到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，空格就会消失。

img链接下方的额外空间。垂直对齐，线高：0不固定。

1 个答案: