h1 태그의 내부 공간을 제거하십시오.

안녕하세요, HTML과 CSS의 초보자입니다! 나는 로고와 제목의 적절한 정렬을 얻으려고 노력하고 있습니다. 둘 다 같은 줄에 있어야합니다. 문제는 h1의 내부 공간을 제거 할 수 없으며 항상 텍스트 위쪽에 여백이있는 것입니다 (h1의 bg에 색상을 지정하면 텍스트 위로 더 확장된다는 것을 알 수 있습니다). 이 문제를 해결할 방법이 있습니까? 아니면 잘못하고 있습니까? 나는 둘 다 똑같은 높이와 똑같은 수평 위치에 있기를 바란다. (제목에서 "T"의 맨 위가 img의 맨 위에 있어야하고 바닥의 경우에도 동일해야한다.)h1 태그의 내부 공간을 제거하십시오.

HTML :

<header> 
    <img src="images/logo.gif" alt="logo"> 
    <h1>Title</h1> 
</header>

CSS :

header 
{ 
    overflow:auto; 
} 

header img 
{ 
    float:left; 
    width:55px; 
    height:55px; 
    margin-right:20px; 
} 

header h1 
{ 
    float:left; 
    padding:0px; 
    margin:0px; 
    font-size:55px; 
}

출처

2013-02-15 Mattias Svensson

당신은'라인 높이 사용할 수 있습니다 픽셀,을, 배경에 관한 한 문제를 해결하기 위해 헤더 h1''에서'하지만, 문자 높이가 다른 글꼴에 걸쳐 다양하기 때문에 수동으로 글꼴 크기를 조정해야 . – Antony

관련 질문 : http : //stackoverflow.com/questions/5256211/negative-margins-vs-relative-positioning – br3w5

'h1'에 대해 '배경'과 같은 ur img를 사용하는 것이 좋습니다. 또한'h1'에'padding-left'을 추가합니다. – primetwig

에 한번 당신의 헤더 (H1)에 음의 여백 - 가기를 추가 :

header h1 { 
    float: left; 
    padding: 0px; 
    margin: 0px; 
    font-size: 55px; 
    **margin-top: -15px;** 
}

출처

2013-02-15 13:45:42 br3w5

내가 당신을 위해 jsfiddle을 만들었습니다 .. 이것이 실현하려고하는 와트인지 알려주세요. -

ssbrewster 제안처럼 0

JSFiddle ALignment - H1 and IMG

header 
{ 
overflow:auto; 
     } 

header img 
{ 
float:left; 
width:55px; 
height:55px; 
margin-right:20px; 
margin-top:10px;/*add this */ 
}

출처

2013-02-15 13:46:52 Shail

거의 해결되었습니다. 정렬은 정확했지만 텍스트 상자는 이미지 끝 아래로 확장됩니다. 어쨌든 고마워! –

그 이유는 텍스트 상자의 높이를 이미지의 크기와 같게 설정했기 때문입니다. 텍스트가있는 새로운 예제가 추가되었습니다. jsfiddle을 확인하십시오. – Shail

음의 여백은 옵션입니다,하지만 당신은 엉망 레이아웃을하지 않으려면 line-height을 시도 할 수 :

header h1 { 
    float: left; 
    padding: 0px; 
    margin: 0px; 
    font-size: 55px; 
    line-height: 70%; 
}

출처

2013-02-15 13:49:31 Aioros

당신이 설정 시도 되세요 선 높이를 고정 값으로 설정 하시겠습니까?

h1 { line-height: 55px;}

출처

2013-02-15 15:26:47 Raffael

h1 태그의 내부 공간을 제거하십시오.

답변

관련 문제