Let's look at an example:
In the above example, we are attempting to add
space above and below the <a> tags,
using the margin-top and margin-bottom properties.
But, it will have no effect. Try changing the value
of margin-top or margin-bottom to 100px.
You'll see that no space is added above or below the links.
This is because, by default,
<a> tags have an inline display property.
To overcome this issue, we can employ the following methods:
Changing the display property:
In the above example, we changed the display property
of the <a> tags to display: inline-block.
Thus, the <a> tags get treated as block-level elements,
allowing us to apply the margins. Try changing the values for
margin-top and margin-bottom and now you'll notice that
the space above and below the links changes.
Applying padding on the parent element:
In the above example, a container element with
the class .container wraps the <a> tags.
By adding padding-top and padding-bottom to the container,
we created 10 pixels of vertical spacing above and below each <a> tag.