якоря значение высоты тега не изменится

Question

Я пытался все решения, перечисленных здесь:

CSS: anchor will NOT accept height

а именно установка <a> тега в display:block и display:inline-block соответственно безрезультатно.

У кого-нибудь есть идеи?

https://jsfiddle.net/ebbnormal/wrtu538f/9/

Вот мой HTML:

<div class="search-bar-locations"> 
    <a href='#' id='center'> 
    SEARCH BY PROGRAM 
    <i class='fa fa-sort-desc'></i> 
    </a> 
    </div> 

Вот мой CSS:

.search-bar-locations a{ 
    overflow:hidden; 
    display:inline-block; 
} 

.search-bar-locations #center { 
    display:inline-block; 
    height: 40px; 
    width: 200px; 
    background: #eab63e; 
    padding: 15px; 
    color: white; 
} 

Вот что он является оказание <a> в 230px X 70px, в отличие от 200 х 40

Answer 1

Оберните якорный тег вне вас <div class="search-bar-locations"> как таковой:

<a href='#' id='center'> 
    <div class="search-bar-locations"> 
    SEARCH BY PROGRAM 
    <i class='fa fa-sort-desc'></i> 
    </div> 
</a> 

Edit: якорные теги взять размер чего-либо внутри них. Поэтому, если вы хотите отформатировать высоту ссылки, измените высоту div внутри нее.

Answer 2

Вам нужно прочитать, как работает модель блока для элементов блока. Помните, что при добавлении дополнений вы добавляете добавленную величину к ширине и высоте окна. Вот почему вы по существу получаете разницу в 30px между тем, что вы ожидаете.

http://www.w3schools.com/css/css_boxmodel.asp

Существует способ обойти это, используя Собственость коробчатых размеров.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

В вашем примере, вы должны использовать:

-moz-box-sizing: border-box; 
     box-sizing: border-box; 

Answer 3

Эй вы могли бы попробовать это решение, так и может дать высоту на якорь. :)

http://jsfiddle.net/akshaybhende/6hk4n4b1/

//CODE 

<div class="search-bar-locations"> 
    <a href='#' id='center'> 
    SEARCH BY PROGRAM 
    <i class='fa fa-sort-desc'></i> 
    </a> 
    </div> 

//CSS 

.search-bar-locations a{ 
    display:block; 
    height: 40px; 
    padding: 15px; 
    line-height:40px; 
    width: 200px; 
    background: #eab63e; 
    color: white; 
    text-align:center; 
    text-decoration:none; 
}