文本顶部与兄弟元素背景对齐

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上的行高属性将控制行之间的空间。