the clickable area of an anchor become bigger after adding margins on it

Question

In order to maker distance between title and list items, I set an <a> with margin: 8px 0;. The weird thing is that the clickable area of the anchor expands just like I set paddings on the element however I did not. What is the situation?

ul.footer-nav {
    margin: 0 12px;
}
ul.footer-nav > a {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin: 8px 0;
}

<ul class="footer-nav">
    <a href="#help-and-information">HELP & INFORMATION</a>
    <li><a href="#help">Help</a></li>
    <li><a href="#track-order">Track Order</a></li>
    <li><a href="#delivery-and-returns">Delivery& Returns</a></li>
</ul>

EDITED----------

If I set both margin and padding on the element, the clickable area and the distance work correctly.

Shouldnt directly nest an `a` tag inside `ul`. Should only have `li` tags directly descended. — tigerdi, Mar 26 '18 at 07:28
Can I use `a` as a direct child of UL? https://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul — Athul Nath, Mar 26 '18 at 07:34
The requirement is not clear, can you please update the required output as image and specify what is desired. — I. Ahmed, Mar 26 '18 at 07:43

Kobi · Answer 1 · 2018-03-26T08:17:59.690

Your a element is set to display:block which expands its clickable are, so it expands to the whole width. I'm guessing you did that because a is display:inline by default, and vertical margin doesn't work for inline elements.

You can use display: inline-block instead, which will still display the margin setting. Here's an example. I've removed the ul entirely, and gave the a element background color, so we ca see what's happening:

a {
    background-color:#fe5;
    display: inline-block;
    margin: 8px 0;
}

<a href="#help-and-information">HELP & INFORMATION</a>

Compare to the original with display:block;

a {
    background-color:#fe5;
    display: block;
    margin: 8px 0;
}

<a href="#help-and-information">HELP & INFORMATION</a>

Note that as the comments warn, you should not have an a element directly in a ul list - that isn't valid and may produce unwanted results.

score 0 · Answer 2 · answered Mar 26 '18 at 08:06

One way, though it might be easiest to just move the link out of the ul.

ul.footer-nav {
    margin: 0 12px;
}
ul.footer-nav > a {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin: 8px 0;
}
ul.footer-nav li:first-child {
    list-style: none;
}
ul.footer-nav li:first-child a {
    text-decoration: none !important;       
}

<ul class="footer-nav">
    <li><a href="#help-and-information">HELP & INFORMATION</a></li>
    <li><a href="#help">Help</a></li>
    <li><a href="#track-order">Track Order</a></li>
    <li><a href="#delivery-and-returns">Delivery& Returns</a></li>
</ul>

score 0 · Answer 3 · answered Mar 26 '18 at 08:10

Ideally ul should only have the child elements as li.

If one wish to make headings, then there are other tags like h1, h2, etc.

So, you should modify your code as below:

ul.footer-nav {
  margin: 0 12px;
}

h3 {
  text-align: center;
}

h3 > a {
  color: black;
}

<h3>
  <a href="#help-and-information">HELP & INFORMATION</a>
</h3>
<ul class="footer-nav">
  <li><a href="#help">Help</a></li>
  <li><a href="#track-order">Track Order</a></li>
  <li><a href="#delivery-and-returns">Delivery& Returns</a></li>
</ul>

the clickable area of an anchor become bigger after adding margins on it

3 Answers3