<!-- More details in this article:
https://dev.to/5t3ph/guide-to-css-units-for-relational-spacing-1mj5 -->
<label>
<span>Input using <code>em</code> spacing</span>
<input type="text" placeholder="Input">
</label>
<button role="button">Button</button>
$font-size: 1.25em;
body {
padding: 2rem;
}
label {
font-size: $font-size;
color: rebeccapurple;
span {
display: block;
// em spacing
margin-bottom: .5em;
}
input {
// em spacing
padding: .25em;
border-radius: .25em;
border: 2px solid rgba(black, 0.54);
}
}
button {
font-size: $font-size;
// em spacing
padding: .25em .75em;
border-radius: .25em;
color: #fff;
background-color: rebeccapurple;
border: 2px solid rebeccapurple;
cursor: pointer;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.