<p>
  <label for="email">Email</label>
  <input type="email" id="email">
</p>
<p>
  <label for="number">Number</label>
  <input type="number" id="number">
</p>
<p>
  <label for="tel">Tel</label>
  <input type="tel" id="tel">
</p>
<p>
  <label for="url">URL</label>
  <input type="url" id="url">
</p>

body {
  padding: var(--metric-box-spacing);
}
p {
  margin-block-end: var(--metric-box-spacing);
}
label {
  display: block;
}