padding - 如何处理在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>位于图像的底线下方。我试图减少line-heightdiv 中的 ，这解决了文本悬挂在图像上的问题，但弄乱了文本填充。有谁知道我应该如何以不同的方式将标题以“正确”的方式放置在图像的右下角？

这是问题的一个jsfiddle：

http://jsfiddle.net/BUpmr/3

Answer 1

默认情况下，图像是内联的，这意味着它们为字符的后代留出了空间。

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

img {display: block}

Answer 2

You're using position: absolute and that takes elements out of the document flow. In this case you want the image and the text element both to take up space, so use position: relative instead.

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

1. Remove the position: absolute; from the body in the css
2. In #title change position: absolute to position: relative;
3. Add width:600px to the elements (because the image is 600px wide) (or make the width on #title smaller (say 550px) to put the text slightly more to the left.
4. add text-align: right to #title to get the text to in the right corner
5. add .thumb img {display:block;}

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;}

Answer 3

如果您知道要从底部向上移动多少像素，则可以这样做：

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

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

Answer 4

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

要修复它，vertical-align: top请在图像上设置：http: //jsfiddle.net/VRyCF/2