html - Why are my footer logos including the margin-left? -
i have run problem regarding logos in footer. there 4 logos in footer (a pinterest logo, facebook logo, twitter logo , google+ logo). each of 4 logos linked seperate webpages however, can't understand why white space (margin-left: 15px) between logos can clicked on. if explain why occurs , how go fixing issue (only logo should clicked on access link, not white space in between), appreciated. thank in advance.
here relevant html code:
<body> <div id="footer"> <div id="footerlogos"> <a href="https://www.pinterest.com/fwtemplates/" target="_blank"> <img src="http://s8.postimg.org/9rkvn5myp/pinteresticon.png" alt="pinterest icon" height="22px"/> </a> <a href="https://www.facebook.com/freewebsitetemplates" target="_blank"> <img src="http://s1.postimg.org/xbrb5tse3/facebookicon.png" alt="facebook icon" height="22px"/> </a> <a href="https://twitter.com/fwtemplates" target="_blank"> <img src="http://s10.postimg.org/z4hzkw8xh/twittericon.png" alt="twitter icon" height="22px"/> </a> <a href="https://plus.google.com/118363260425872001433" target="_blank"> <img src="http://s2.postimg.org/63vc1sv8l/google_icon.png" alt="google+ icon" height="22px"/> </a> </div> </div> </body>
here relevant css:
#footer { width: 100%; height: 50px; background-color: #999999; border-bottom: 1px solid black; padding-right: 20px; padding-left: 20px; clear: both; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #footerlogos { height: 100%; line-height: 45px; display: inline-block; float: right; } #footerlogos img { opacity: 0.6; vertical-align: middle; margin-left: 15px; } #footerlogos a:link { text-decoration: none; }
here link jsfiddle relevant html , css: https://jsfiddle.net/kqwm5m45/
because clickable element img
has margin-left: 15px
. contained in a
-tag clickable. expected behaviour.
in case, won't this. should move margin-left: 15px
away #footerlogos img
#footerlogos a
.
#footerlogos { margin-left: 15px; } #footerlogos img { opacity: 0.6; vertical-align: middle; }
Comments
Post a Comment