Margin-bottom does not create space below an <a> tag

Question

Within my HTML form, I have a link <a href='...'>...</a> followed by a label <label ...>...</label>. I set a bottom margin for the link like this:

form a {
    margin-bottom: 10px;
}

When I inspect elements using Google Chrome Console, the a tag indeed has a margin-bottom of 10px. But the label is directly below it with no space. How can I generate some space there?

Answer 1

By default a tags are inline elements and therefore can't have margins added. You would need to make your a tag display like a block element to see margins and other attributes associated with block elements:

form a {
    display: block;
    margin-bottom: 10px;
}