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

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -