Question

Including the “float: left” at the place labeled “here!!!” made the padding of the “a” element independent of the padding of the ancestor “ul” element. Also the space between the “a” elements disappeared, as shown in picture A (before including “float: left”) and picture B (after).

Could someone explain why this happens for me?

#top-menu {
    width: 470px;
    height: 200px;
    position: absolute;
    right: 0;
    border: solid;
}

#top-menu ul {
    width: 400px;
    float: left;
    padding: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    border: solid;
}

#top-menu li {
    display: inline;
    position: relative;
}

#top-menu li a {
    border: 1px solid transparent;
    border-radius: 4px 4px 4px 4px;
    color: #5A6770;
    float: left; /* <----- HERE!!! -----*/
    padding: 15px 20px;
    position: relative;
    text-decoration: none;
}

#top-menu li a:hover {
    background-color: #ECEFF2;
    border-color: #D1D6D9;
}

#top-menu li a:active {
    background-color: #E4E7EB;
    border-color: #BAC1C6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) inset;
}

Answer 1

That’s because the <a> element is inline element. And when you add it float:left it starts acting like block element.

You can only have margin and padding on inline elements which affects only the “line” .. i.e left and right. But you can’t top and bottom because for example. Imagine that you have long paragraph, about 10 lines. And somewhere you have span or a – inline elements. There is no logic to give them top and bottom margin and padding, cause the all paragraph will brake, but you can add left and right.

Very good explanation you can find HERE.