HTML : br 요소 사이의 높이 조절

Question

주어진 바이올린에서 이미지의 맨 처음에 단어를 정렬하고 이미지의 맨 아래에 두 번째로 정렬합니다. 나는 br 요소하지만 아무것도에 대한 span 및 margin에 대한 line-height을 시도 http://jsfiddle.net/himanshuy/W6ATN/15/

작동하는 것 같다.

Answer 1

일부 html을 다시 정렬했습니다. 먼저 img 요소와 두 스팬 요소를 자신의 div에 넣습니다. 그래서 두 개의 인라인 div가 있습니다. 또한 스팬 중 하나에 스타일을 추가했습니다. http://jsfiddle.net/W6ATN/17/

그 바이올린이 여기에 실패 마크 업 인 경우 :

HTML

<div class="box"> 
<div class="logo"> 
    <div class="inlineDiv"> 
    <img src="c:\work\img\logo3.jpg" width="80" height="80" /> 
    </div> 
    <div class="inlineDiv"> 
     <span class="spanTop">YAD</span> 
     <span>HIM</span> 
    </div> 
</div> 
</div>​ 

CSS를이 같이

div.box { 
    background-color: #000000; 
    color: #FFFFFF; 
    width: 300px; 
    height: 400px; 
    text-align: center;  
} 

img { 
margin-top:20px; 
} 

.inlineDiv 
{ 
display:inline; 
} 

.spanTop 
{ 
margin-top:10px; 
position:absolute; 
} 

span { 
font-size: 30px; 
color: red; 
clear:both; 
line-height:45px; 
}