높이가 'A'태그에서 작동하지 않습니다.

Question

탐색 바를 만들고 있는데 그 안에있는 모든 링크를 30px 높이로하고 싶습니다. 내가 이것을 설정할 때 - height:20px; (20px 주위에 5px 패딩이 있기 때문에 20px) - 높이는 단지 정상적으로 유지됩니다. 는 A의 내 전체 코드는 다음과 같습니다

#header a { 
    height:20px; 
    background-color:#666666; 
    color:white; 
    text-decoration:none; 
    border:none; 
    padding:5px; 
} 

#header a:hover { 
    background-color:#CCCCCC; 
    color:black; 
} 

JSFiddle : http://jsfiddle.net/Lcupj/

Answer 1

display: inline 및 <a> 요소는 기본적으로 display: inline 인 요소에는 적용되지 않습니다.

display 속성 (예 : inline-block)에 다른 값을 설정하거나 line-height을 대신 사용하십시오.

Answer 2

height 블록을 인라인 적용되지 않습니다.

CSS에서 display: inline-block을 사용하면 요소가 인라인 요소처럼 동작하지만 일부 블록 요소 속성이 적용됩니다.

Answer 3

는

Answer 4

당신은 또한 수동으로 지정된 요소의 높이 또는 패딩을 설정해야 때때로 다음

#header a { 
    position:absolute; 
    margin:0; 
    padding:0; 
    height:20px; 
    background-color:#666666; 
    color:white; 
    text-decoration:none; 
    border:none; 
    padding:5px; 
} 

을 시도 할 수 있습니다, 또는 요소가 숙청 될 CSS의 규칙 display:inline-block에 추가 다른 다른 요소 내부에 들어 맞습니다. 또한 중 하나 태그에 패딩 및 사용 라인 높이를 사용할 수있는 절대이 당신의 요소 위치를 통해 100 % 제어 할 수 있습니다, 크기 등

http://jsfiddle.net/Lcupj/

Answer 5

: 나는 또한 위치를 사용합니다. 예 :

a { 
    padding : 9px; 
    line-height : 20px; 
} 

안녕히 가세요.

Answer 6

사용 display: inline-block;

#header a { 
    height:30px; 
    background-color:#666666; 
    color:white; 
    text-decoration:none; 
    border:none; 
    padding:5px; 

    display: inline-block; 
} 

DEMO

Answer 7

A는 당신이 그것에 높이를 사용할 수 없습니다, 인라인 요소입니다. 그렇게하려면 먼저 블록 요소로 변경해야합니다. display: block;으로 그렇게 할 수는 있지만 화면의 새로운 "줄"에 요소를 넣을 수 있습니다. 인라인 요소처럼 유지하려면 디스플레이를 사용해야합니다. inline-block; 또는 선 높이를 사용할 수도 있습니다.