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?\[code\]#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;}\[/code\]