CSS - heading logo

Question

HTML과 CSS로 웹 페이지를 만들고 있습니다. 내 문제는 왼쪽으로 삽입 한 작은 로고 위에 제목이 나타나는 것입니다. 나는 로고에서 약간의 거리를두고 바로 향하고 싶다. 어떻게해야합니까? 헤더에 다음과 같은 스타일 속성을 적용하여

h1 { 
    font-family: "Arial" ; 
    color: #808080; 
    font-size:190%; 
} 

h1 { 
    background-image: url(something.png); 
    background-size: 20px 20px; 
    background-repeat: no-repeat; 
    background-position: left ; 
    padding:1px; 
    margin:-2px; 
} 

Answer 1

, 나는 간단한 해결책을 온 :

header { 
    display: block; 
    line-height: 4em; 
    height: 120px; 
    padding-left: 120px; 
    background: #4466FF url('http://placehold.it/80x80/FFFFFF/444466&text=My+Logo') no-repeat 20px 20px; 
    font-weight: bold; 
    font-size: 2em; 
} 

첫째,이 <header>block 요소를했다. <div> 인 경우 display 속성을 설정할 필요가 없습니다. 다음으로, 나는 텍스트의 크기와 무게를 결정했다. 이는 라인 높이 (의사 수직 정렬)을 결정할 때 중요합니다. 배경 이미지를 추가하고 오프셋을 설정 한 다음 <header>에 left-padding을 추가하여 배경 로고 오른쪽에 20 픽셀 오프셋했습니다. 여기

위의 레이아웃에 대한 DEMO이다

이

의 결과이다.

<header>My Header</header> 
<content>Lorem Ipsum</content> 
<footer>Copyright 2014</footer> 

body { 
    width: 600px; 
    margin: 0 auto; 
} 

header { 
    display: block; 
    line-height: 4em; 
    height: 120px; 
    padding-left: 120px; 
    background: #4466FF url('http://placehold.it/80x80/FFFFFF/444466&text=My+Logo') no-repeat 20px 20px; 
    font-weight: bold; 
    font-size: 2em; 
} 

content { 
    display: block; 
    height: 200px; 
    background: #AAAABB; 
    padding: 4px; 
} 

footer { 
    display: block; 
    line-height: 4em; 
    height: 60px; 
    background: #223377; 
    color: #FFFFFF; 
    font-size: 0.75em; 
    text-align: center; 
}