<body>
<div class='em'>
em padding & margin:
<br>
<button class='btn small'>button</button>
<button class='btn'>button</button>
<button class='btn large'>button</button>
</div>
<div class='rem'>
rem padding & margin:
<br>
<button class='btn small'>button</button>
<button class='btn'>button</button>
<button class='btn large'>button</button>
</div>
</body>
.em .btn {
font-size: 20px;
padding: 1em 2em;
margin: 1em;
}
.em .small {
font-size: 10px;
}
.em .large {
font-size: 30px;
}
.rem .btn {
font-size: 20px;
padding: 1rem 2rem;
margin: 1rem;
}
.rem .small {
font-size: 10px;
}
.rem .large {
font-size: 30px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.