文本頂部與兄弟元素背景對齊

Question

忽略這是否看起來不錯。

我正在尋找最佳方式來將文本的頂部與相鄰塊元素對齊，並在其中包含背景或圖像。與下面的測試案例片段，我想要爲[優雅]擺脫的是紅色的差距：

.col { 
 
    width: 40%; 
 
    min-height: 300px; 
 
    float: left; 
 
    margin-right: 4%; 
 
} 
 
.bg { 
 
    background: #333; 
 
} 
 
p,h1 { 
 
    margin: 0; 
 
}

<div class="col bg"></div> 
 
<div class="col"> 
 
    <h1>Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>

這基本上是從line-height未來。設置line-height爲1解決了這個問題，但是然後生成任何我需要支持的多行文本。即使將line-height更改爲:first-line，也會導致多行文本的間距不合適。現在，我能想到的最好的方法是嘗試提出一些適用於標題，段落等的魔術數字否定emmargin-top值，但我想知道是否有更好的方法。

Answer 1

現在提供的其他答案確實有效，但我真的很想避免使其工作所需的額外標記。不幸的是，這導致我找到了magic number解決方案。我不知道現在有一個很好的解決方案，那就是純CSS。我玩過：一線僞選擇器，但效果不佳。

我最後只是在<h1>元素上使用了一個負margin-top。我認爲margin的值或多或少可以用於：

-(({line-height} - 1)/2)em 

這假定您使用的是無單位的行高值。

Answer 2

h1本身與仿擬元素對齊，但其中的文本不是。

要垂直對齊文本到h1標籤中，您需要設置行高。

.col { 
 
    width: 40%; 
 
    min-height: 300px; 
 
    float: left; 
 
    margin-right: 4%; 
 
} 
 
.bg { 
 
    background: #333; 
 
} 
 
p,h1 { 
 
    margin: 0; 
 
} 
 

 
.col h1 { 
 
    line-height: 21px; 
 
} 
 

 
.col h1 span { 
 
    vertical-align:super; 
 
} 
 

 
div{ 
 
    padding:0; 
 
    }

<div class="col bg"></div> 
 
<div class="col"> 
 
    <h1><span>Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </span></h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>

編輯：

使用它在多線：把你的文字與垂直對齊跨度：超; h1上的行高屬性將控制行之間的空間。