为啥段落文本在默认的 CSS3 多列网站布局中不能正确对齐？

Posted 2023-03-05

【中文标题】为啥段落文本在默认的 CSS3 多列网站布局中不能正确对齐？

【英文标题】：Why paragraph text doesn't align properly in a default CSS3 multicolumn website layout?为什么段落文本在默认的 CSS3 多列网站布局中不能正确对齐？

【发布时间】：2016-02-27 10:10:00

【问题描述】：

以下简单的纯段落文本在默认的 CSS3 多列网站布局中无法正确对齐的原因可能是什么？请参阅 (A) 以了解第 1 列中缺少的第一行，请参阅 (B) 了解未对齐的情况，其中该行的基线明显与第二列的基线不完全相同！

article 
-webkit-column-count: 3;
   -moz-column-count: 3;
        column-count: 3;

-webkit-column-gap: 12px;
   -moz-column-gap: 12px;
        column-gap: 12px;

<article>
<p>Een was 17 graden onder nul één ideëen toen het ijs onder onze benen begon te kraken. Al miljoenen jaren leven dieren in harmonie zonder maar ook een druppel aardolie of een aardgas tot zich aan te wenden. Recentelijk is de focus van fossiele naar alternatieve energiebronnen verschoven. Giftige lithium batterijen en zonnepanelen die devoorraad fosfor in hoog tempo uitputten. Over een decennium hebben we weer andere problemen. Als innovator en bouwkundig ingenieur stel ik iets heel anders voor: het niet terugbrengen van onze energiebehoefte altgether. 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). 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. 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>

【参考方案1】：

您是否尝试过：

article p 
    margin: 0;

它可以工作here in a fiddle。在 Chrome 和 FF 中测试。

找不到没有上述修复的原因，它在 FF 中显示错误，但在 Chrome 中默认

样式是：

p 
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;