<h2><code>padding: 10px;</code></h2>
<div class="ap"></div>
<h2><code>padding: 2em 4em;</code></h2>
<div class="bp"></div>
<h2><code>padding: 1em 20px 2em;</code></h2>
<div class="cp"></div>
<h2><code>padding: 10px 10% 2em 15%;</code></h2>
<div class="dp"></div>
* {
box-sizing: content-box;
}
body {
font-family: Lato;
margin: 10px;
font-size: 1.4em;
}
h2 {
font-size: 1.1em;
margin-left: 2em;
}
div {
background: orange;
background-clip: content-box;
height: 80px;
width: 80px;
margin: 2em;
margin-top: 0em;
border: 1px solid black;
}
.ap {
padding: 10px;
}
.bp {
padding: 2em 4em;
}
.cp {
padding: 1em 20px 2em;
}
.dp {
padding: 10px 10% 2em 15%;
}
This Pen doesn't use any external JavaScript resources.