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

Question

忽略这实际上是否合适。

我正在寻找将文本顶部与相邻块元素对齐的最佳方法，其中包含背景或图像。通过下面的测试用例片段，我试图[优雅地]摆脱的是红色差距：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这主要来自line-height。将line-height设置为1可以解决问题，但随后会出现我需要支持的任何多行文本。即使将line-height更改仅应用于:first-line，也会导致多行文字的间距不正确。现在，我能想到的最好的方法是尝试将一些幻数负em margin-top值用于标题，段落等，但我想知道是否有＆ ＃39;更好的方式。

Answer 1

h1本身与simbling元素对齐，但其中的文本不是。

要将文本垂直对齐到h1标记，您需要设置行高。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：

在多行中使用它：将文本放入带有vertical-align：super的span中; h1上的line-height属性将控制行之间的空间。

Answer 2

现在提供的另一个答案确实有效但我真的想避免使其工作所需的额外标记。不幸的是，这导致了magic number解决方案。我现在还不确定这是一个很好的解决方案，那就是纯CSS。我玩过：第一线伪选择器，但效果不佳。

我最终得到的只是在margin-top元素上使用否定<h1>。我认为保证金的价值或多或少可以达到：

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

假设您使用无单位行高值。