html - HTML：调整 br 元素之间的高度

Question

在给定的小提琴中，我希望第一个单词与图像顶部对齐，第二个单词在图像底部对齐。 http://jsfiddle.net/himanshuy/W6ATN/15/

我已经尝试line-height了spanand元素margin，br但似乎没有任何效果。

Answer 1

我重新安排了一些你的html。首先，我将 img 元素和两个 span 元素放在各自的 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;
}