高级 CSS 技巧：如何使用多列布局将文本段落与 "baseline grid" 对齐？

Question

多年来我一直在为这个问题而苦苦挣扎，现在我终于将通过展示典型的 css 多列布局向您展示我的意思，其中文本垂直移动，而不是整齐地对齐到水平基线网格！[=2​​1=]

检查下面的两个代码片段，您会发现在 <br> 中断后，文本不再与其原始的 "baseline" 网格对齐，并且线条变得难以阅读。在第一个代码片段中，我尝试只插入一个 <br> 并尝试将其设置为正好跳转两行。在第二次试用中，我删除了 p br{} 并仅插入了两个 <br><br>，这也导致段落文本未对齐。我们如何才能使所有列中的所有文本对齐（仅通过 CSS！）到相同的基线水平网格？现在我觉得这与首字下沉的首字母有关，但没有找到 how/why 使它看起来整洁。

结果只需要在最新版本的主要浏览器 FireFox、Chrome、InternetExplorer 和 Safari 上工作。

p br{
    display: block;
    margin: 0 0 2em 0;
}

article {
  width: 1000px;
  height: 520px;
  background-color: #ECC;
  text-align: justify;
  word-spacing: -1pt;
  line-height: 30px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 12px;
  -moz-column-gap: 12px;
  column-gap: 12px;
}
p:first-of-type:first-letter {
  float: left;
  font-size: 60px;
  margin: 11px 7px -9px -4px;
  font-weight: normal;
  line-height: 60px;
}
p br {
  display: block;
  margin: 0 0 2em 0;
}

<article>
  <p>
Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.<br>
    Verwarmen en koelen kan ook op manieren dat het geen enkele energie meer nodig is. Een experiment in hoeverre dit mogelijk is vergt het uiterste van twee natuurlijke processen: isolatie en ventilatie. Op de meeste plaatsen in de wereld is de warmte van de zon en de inwendige warmteproductie (van elektrische apparaten) onvoldoende om het hele jaar door in de leefruimtes een aangename binnentemperatuur te bereiken: er is verwarming nodig. Indien de binnentemperatuur hoger is dan de buitentemperatuur ontstaat volgens de wetten van Fourier energietransport door de schil van een gebouw (muur, dak, vloer).<br>

Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.<br>

Ook condenseert waterdamp minder snel op een warm oppervlak. De vacht of het verenkleed van dieren dient hetzelfde doel. De waterdamp migreert dan door de wand en de isolatie, om daarin te condenseren. Om die condensatie te voorkomen wordt dampdichte folie aangebracht, die de migratie van verse lucht ook belemmert, waardoor warmteverliezende ventilatieroosters moeten worden toegepast.</p>
</article>

article {
  width: 1000px;
  height: 520px;
  background-color: #ECC;
  text-align: justify;
  word-spacing: -1pt;
  line-height: 30px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 12px;
  -moz-column-gap: 12px;
  column-gap: 12px;
}
p:first-of-type:first-letter {
  float: left;
  font-size: 60px;
  margin: 11px 7px -9px -4px;
  font-weight: normal;
  line-height: 60px;
}

   <article>
  <p>
Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.
    <br>Verwarmen en koelen kan ook op manieren dat het geen enkele energie meer nodig is. Een experiment in hoeverre dit mogelijk is vergt het uiterste van twee natuurlijke processen: isolatie en ventilatie. Op de meeste plaatsen in de wereld is de warmte van de zon en de inwendige warmteproductie (van elektrische apparaten) onvoldoende om het hele jaar door in de leefruimtes een aangename binnentemperatuur te bereiken: er is verwarming nodig. Indien de binnentemperatuur hoger is dan de buitentemperatuur ontstaat volgens de wetten van Fourier energietransport door de schil van een gebouw (muur, dak, vloer).<br>

Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.<br>

Ook condenseert waterdamp minder snel op een warm oppervlak. De vacht of het verenkleed van dieren dient hetzelfde doel. De waterdamp migreert dan door de wand en de isolatie, om daarin te condenseren. Om die condensatie te voorkomen wordt dampdichte folie aangebracht, die de migratie van verse lucht ook belemmert, waardoor warmteverliezende ventilatieroosters moeten worden toegepast.</p>
</article>

Answer 1

答案可能有点晚，但无论如何。通过删除默认边距，线条的对齐方式如您所愿：

p {
  margin:0;
}

参见：https://jsfiddle.net/w5vs4j59/