Unités pour line-height et margin-bottom

by PhilippeVay

HTML

<body>
    <div>
        <p class="un">lorem<br>ipsum</p>
        <p class="deux">lorem<br>ipsum</p>
        <p class="trois">lorem<br>ipsum</p>
    </div>
    <div>    
        <p class="quatre">lorem ipsum</p>
        <p class="cinq">lorem ipsum</p>
        <p class="six">lorem ipsum</p>
    </div>
</body>

CSS

body {
    font: normal 100%/1.5 arial, sans-serif;
}

div:after {
    content: "";
    display: block;
    clear: both;
    padding-bottom: 10px;
}
p:before {
    content: attr(class) " : ";
}
p {
    position: absolute;
    width: 25%;
    background: blue;
    color: white;
    border: 1px solid black;
    border-left: none;
    border-right: none;
    margin: 0 4px;
    padding: 0 2px;
}
div + div > p {
    bottom: 0;
}
.un {
    line-height: 1.5em;
}
.deux {
    line-height: 150%;
    left: 37.5%;
}
.trois {
    line-height: 1.5;
    left: 75%;
}
.quatre {
    margin-bottom: 1.5em;
}
.cinq {
    margin-bottom: 15%; /* quinze, pas cent-cinquante et c'est déjà une valeur énorme */
    left: 37.5%;
}
.six {
    margin-bottom: 1.5;
    left: 75%;
}

JavaScript

/* En réponse à 

http://forum.alsacreations.com/topic-6-62220-1-Taille-de-caractere-et-espacement-717-du-RGAA.html

*/