래퍼가 링크 텍스트를 포함하도록하려면 어떻게해야합니까?

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

문제는 이미 구체 높이를 .box div로 설정하고 앵커 태그를 105px로 밀어 넣는 것입니다. 이렇게하면 div의 크기가 증가하고 높이는 100px로 고정되며 래퍼는 여전히 div가 100px라고 생각합니다.

하나는 box DIV에 (빨간색 BG 플러스 패딩 및 앵커 태그의 높이와 DIV의 높이)를 appropirate 높이를 설정하거나 min-height 대신 height를 사용하여 사용합니다.