Set margin between label and input in HTML form

forms, html, margin

Solution

A `<label>` is displayed as `inline` by default. You have to change that to `inline-block` or `block` in order to set the `margin`.

label {
    display: inline-block;
    margin: 10px;
}

Some resources to learn more about the CSS box model:

- MDN article

- CSS-Tricks article

Some resources to learn more about the `display` attribute in CSS:

- MDN article

Problem

I want to change the margin between the label and input of a simple HTML form. The labels are below the input fields. When I set a class I can change other properties like font-size but not margin.

Original source