Why paragraph text doesn't align properly in a default CSS3 multicolumn website layout?

Question

What could be the reason why the following simple plain paragraph text doesn't align properly in a default CSS3 multicolumn website layout? See (A) for a missing first line in column 1, and see (B) for misalignment where the baseline of the line clearly is not exactly the same as that of the second column!

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>

Answer 1

Have you simply tried:

article p {
    margin: 0;
}

It works here in a fiddle. Tested in Chrome and FF.

Can't find reason why without above fix it displays wrong in FF, but in Chrome default <p> styling is:

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