如何处理在div底部添加填充的线条高度

Question

我有一个网站，其中有<div> s，可扩展为包含图像和标题。什么到目前为止，我所做的就是创建这样一个层次结构：

<div class="thumb"> 
    <img src="image_url"/> 
    <div id="title">title</div> 
</div> 

然后放置在标题是这样的：

#title{ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

但标题<div>位于图像的底部线以下。我试图减少div中的line-height，并且解决了文本悬挂在图像上的问题，但弄乱了文本填充。是否有人知道我应该如何以不同的方式将图像右下角的标题以“正确”的方式定位？

这里的问题的的jsfiddle：

http://jsfiddle.net/BUpmr/3

Answer 1

如果你知道你要多少像素它从底部移动，你可以做这样的：

#title 
{ 
    position: absolute; 
    right: 0px; 
    bottom: 5px; 
    background-color: #0f0; 
    padding: 0px 4px 0px 4px; 
} 

http://jsfiddle.net/BUpmr/12/

Answer 2

底部空间的原因不是行高，它是浏览器尝试将图像的底部与文本的基线。

为了解决这个问题，在图像上设置vertical-align: top：http://jsfiddle.net/VRyCF/2

Answer 3

图片会直接默认情况下，这意味着它们允许空间字符伸。

http://jsfiddle.net/BUpmr/10/

img {display: block} 

Answer 4

您正在使用的位置是：绝对的，取出文档流的元素。在这种情况下，您希望图像和文本元素都占用空间，所以请使用position: relative。

http://jsfiddle.net/BUpmr/13/

1. 从主体中的CSS
2. 在#title变化position: absolute到position: relative;
3. 卸下position: absolute;添加width:600px于元件（因为图像是600像素宽）（或使宽度为#title较小（比如550px）将文本稍微向左多放
4. add text-align: right to #title让文字在右上角
5. 附加.thumb IMG {显示：块;}

CSS：

body { 
     background-color: #eef; 
     padding: 0px; 
     margin: 0px; 
    } 

    #title{ 
     position: relative; 
     text-align:right; 
     width:550px; 
     bottom: 0; 
     right: 0; 
     background-color: #0f0; 
     padding: 0px 4px 0px 4px; 
    } 

    .thumb{ 
     background-color: #f00; 
      width:600px; 
    } 

    .thumb img {display:block;}