html - HTML:br要素間の高さを調整

Question

指定されたフィドルでは、最初の単語を画像の上部に配置し、2 番目の単語を画像の下部に配置します。 http://jsfiddle.net/himanshuy/W6ATN/15/

との要素を試しline-heightましたが、何も機能していないようです。spanmarginbr

Answer 1

html の一部を再配置しました。まず、img 要素と 2 つの span 要素をそれぞれの div に配置します。したがって、2 つのインライン div があります。また、スパンの 1 つにスタイルを追加しました。ここで最終結果を確認できます: 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;
}