px - em - % - pt

by sv_in

HTML

<div class="pixel container">
    <h1>Pixel</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et adipiscing lacus, laoreet pellentesque nibh. Donec sodales venenatis nisl, quis dictum enim. Nam facilisis, libero vitae cursus euismod, nisl purus dignissim metus, cursus tempus velit lacus et ante. Sed vehicula volutpat molestie. Sed laoreet elit quis lorem vehicula ornare. Sed interdum vestibulum pellentesque. Nulla facilisi.</p>
    <img src="http://www.lipsum.com/images/lipsum08.gif"></img>
</div>
<div class="point container">
    <h1>Point</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et adipiscing lacus, laoreet pellentesque nibh. Donec sodales venenatis nisl, quis dictum enim. Nam facilisis, libero vitae cursus euismod, nisl purus dignissim metus, cursus tempus velit lacus et ante. Sed vehicula volutpat molestie. Sed laoreet elit quis lorem vehicula ornare. Sed interdum vestibulum pellentesque. Nulla facilisi.</p>
    <img src="http://www.lipsum.com/images/lipsum08.gif"></img>
</div>
<div class="em container">
    <h1>EM</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et adipiscing lacus, laoreet pellentesque nibh. Donec sodales venenatis nisl, quis dictum enim. Nam facilisis, libero vitae cursus euismod, nisl purus dignissim metus, cursus tempus velit lacus et ante. Sed vehicula volutpat molestie. Sed laoreet elit quis lorem vehicula ornare. Sed interdum vestibulum pellentesque. Nulla facilisi.</p>
    <img src="http://www.lipsum.com/images/lipsum08.gif"></img>
</div>
<div class="percent container">
    <h1>Percent</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et adipiscing lacus, laoreet pellentesque nibh. Donec sodales venenatis nisl, quis dictum enim. Nam facilisis, libero vitae cursus euismod, nisl purus dignissim metus, cursus tempus velit lacus et ante. Sed vehicula volutpat molestie. Sed laoreet elit quis lorem vehicula ornare. Sed interdum...

CSS

.container {
    border: 1px solid black;
}

.pixel {
    padding: 10px;
    margin: 20px;
}
.pixel h1 {
    font-size: 20px;
}
.pixel p {
    font-size: 10px;
}
.pixel img {
    width: 100px;
}

.point {
    padding: 7.5pt;
    margin: 15pt;
}
.point h1 {
    font-size: 15pt;
}
.point p {
    font-size: 7.5pt;
}
.point img {
    width: 75pt;
}

.em {
    font-size: 62.5%;
    padding: 1em;
    margin: 2em;
}
.em h1 {
    font-size: 2em;
}
.em p {
    font-size: 1em;
}
.em img {
    width: 10em;
}

.percent {
    font-size: 100%;
    padding: 1%;
    margin: 2.6%;
}
.percent h1 {
    font-size: 125%;
}
.percent p {
    font-size: 62.5%;
}
.percent img {
    width: 13.6%;
}