對齊div的CSS問題

Question

我對以下CSS有問題。我不想和標題保持一樣的高度。雖然看起來投票與標籤和div相同。所以左邊的3個項目看起來縮小了。我很新，所以我沒有看到我做錯了什麼。在將高度從54更改爲60像素之前，我已經開始工作了，但我認爲還有一些其他內容已添加。

#containerpostsmall { 
width: 800px; 
height:60px; 
} 
.votes { 
height:60px; 
width:100px; 
float: left; 
} 
.number { 
height:40px; 
text-align: center; 
} 
.number-text { 
height:20px; 
text-align: center; 
} 
.texttags { 
width:500px; 
height:60px; 
float: left; 
} 
.title { 
height:40px; 
width:500px; 
font-size:32px; 
overflow: hidden; 
white-space: nowrap; 
} 
.tagsby { 
height:20px; 
width:500px; 
float: left; 
} 
.tags { 
float: left; 
} 
.by { 
float: right; 
} 

我有下面的代碼部分：

<div id="containerpostsmall"> 
<div class="votes"> 
    <div class="number"> 
     <h1>6</h1> 
    </div> 
    <div class="number-text"> 
     votes 
    </div> 
</div> 
<div class="votes"> 
    <div class="number"> 
     <h1>1</h1> 
    </div> 
    <div class="number-text"> 
     answers 
    </div> 
</div> 
<div class="votes"> 
    <div class="number"> 
     <h1>4</h1> 
    </div> 
    <div class="number-text"> 
     comments 
    </div> 
</div> 
<div class="texttags"> 
    <div class="title"> 
     <a href="/Post/View/37">We were very tired.</a> 
    </div> 
    <div class="tagsby"> 
     <div class="tags"> 
        <span style="background-color: #ffffff; border-color: #000000;"><a href="/Post/ByTag/2">Forest</a></span> 
        <span style="background-color: #ffffff; border-color: #000000;"><a href="/Post/ByTag/3">Ocean</a></span> 

     </div> 
     <div class="by"> 
      <a href="/Post/ByAuthor/30">Peter</a> | 
      2013-12-03 18:56:34 
     </div> 
    </div> 
</div> 
</div> 

Answer 1

這在我看來就像一個默認的H1格式問題。瀏覽器將對某些元素應用默認樣式。

我設置

h1{ 
    margin: 0; 
} 

見琴：http://jsfiddle.net/kZLub/