Marges en pixels VS en ems

by htmlzengarden

HTML

<!--
    La marge basse en grise est de taille fixe, quelque soit la taille de la police.
    La marge basse en rose est de taille proportionnelle Ă  la taille de la police.
-->
<div class="colonne">
    <p class="em">
        <span>em EM em EM</span>
    </p>
    <p class="px">
        <span>px PX px PX</span>
    </p>
</div>
<div class="colonne taille">
    <p class="em">
        <span>em EM em EM</span>
    </p>
    <p class="px">
        <span>px PX px PX</span>
    </p>
</div>

CSS

body
{
    font-family: sans-serif;
    background-color: #F9F4E2;
}
p.em,
p.px
{
    margin:0;
    padding:0;
    background-color:#DD0C7B;
    color:inherit;
}
span
{
    background-color:#F9F4E2;
    color:#333;
    display:inline-block;
}
p.em
{
    padding-bottom:1em;
}
p.px
{
    padding-bottom:10px;
    background-color:#333;
    color:inherit;
}
.colonne
{
    float:left;
    width:45%;
    margin-right:5%;
}
.taille
{
    font-size:4em;
    font-size:64px;
}