Как перенести позиционирование ссылки на изображение в навигационной панели?

Question

На данный момент у меня есть панель навигации на моей странице макета, которая включает в себя логотип. На этом логотипе есть ссылка, чтобы перейти на сайт. Тем не менее, ссылка охватывает только 10 пикселей по горизонтали и 100 пикселей по вертикали. Я не понимаю, почему.

HTML:

<div class="navbar-header"> 
         <content class="col-md-1 col-md-offset-0" id="APTick"> 
          <a href="http://www.google.co.uk/" class="navbar-brand" id="Logo"> 
          </a> 
         </content> 
       </div> 

CSS:

#APTick{ 
    left: -15px; 
    background-color: #698277; 
} 

#Logo { 

    background-color: #698277; 
    width: 100px; 
    height: 72px; 
    background-image: url("Images/Logo/ap_tick.png"); 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 

} 

Может кто-нибудь помочь мне перенести расположение пространства ссылок?

Answer 1

#Logo является встроенным элементом. Если вы хотите, чтобы размер установки вам нужно display как block элемент

#Logo { 
 
    display:block; 
 
    background-color: #698277; 
 
    width: 100px; 
 
    height: 72px; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-image: url("Images/Logo/ap_tick.png"); 
 
}

<div class="navbar-header"> 
 
         <content class="col-md-1 col-md-offset-0" id="APTick"> 
 
          <a href="http://www.google.co.uk/" class="navbar-brand" id="Logo"> 
 
          </a> 
 
         </content> 
 
       </div>

Answer 2

<a> элемент встроенный элемент, так что вы не можете установить height на нем, вы можете установить line-height (не рекомендуется) или сделать его display:inline-block или display:block