Wrapperにリンクテキストを含めるにはどうすればよいですか？

Question

私は意図的に自分の含む下に自分のリンクテキストを押しています<div class="box">

問題は、wrapperにリンクテキストが含まれていないということです。どのようにしてそれを取り巻くようにするのですか？

Here's the fiddle.

<div id="wrapper"> 
    <div class="box lowest"><a href="#">Home</a></div> 
    <div class="box medium"><a href="#">About</a></div> 
    <div class="box"><a href="#">Products</a></div> 
    <div class="box medium"><a href="#">Services</a></div> 
    <div class="box lowest"><a href="#">Contact</a></div> 
</div> 

#wrapper{ 
    width: 600px; 
    margin: 0 auto; 
    text-align: center; 
    border: solid 1px green; 
    position:relative; 
    white-space: nowrap; 
    letter-spacing: 15px; 

} 

.box a{ 
    padding-top: 105px; 
    display: block; 
} 

.box{ 
    width:75px; 
    height: 100px; 
    background-color:red; 
    border: solid 1px black; 
    display: inline-block; 
    vertical-align: top; 
    letter-spacing: normal; 
} 

.lowest{ 
    margin-top:50px; 
} 

.medium{ 
    margin-top:25px;    
} 
​ 

スクリーンショット

Answer 1

、#wrapper追加するには：

padding-bottom: 30px; 

Answer 2

ここで問題となるのは、specficの高さを.box divに設定し、アンカータグを105pxのパディングで押し込んだことです。これはdivのサイズを増やし、高さは100pxに固定して設定されますが、ラッパーはdivが100px高いと考えています。

いずれかがbox DIV（赤BG プラスパディングとアンカータグの高さとDIVの高さ）にappropirate高さを設定または単にmin-height代わりにheightを使用する使用します。