如何處理在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;}