如何定位樣式錨元素沒有絕對和沒有包裝div？

Question

我有以下HTML：

<div class="top"> 
     <div class="header title">Some Big Header Goes Here</div> 
     <div class="sub-header title">The fancyness enters here.</div> 
     <a href="#">A random link</a> 
</div> 

鋪有以下類：

.header { 
     padding:2%; 
} 
.sub-header { 
     font-size:120%; 
     font-style:italic; 
} 
.title { 
     font-size:158%; 
     line-height:80%; 
} 
.top { 
     display:block; 
     text-align:center; 
     border:1px solid lime; 
     padding:1%; 
} 
.top a { 
     /*color:red;*/ /* This works but I don't want this */ 
     padding:100000px; /* This does not work, nor do smaller values */ 
     margin:-999999px; /* This does nothing. */ 
} 

我如何樣式的錨鏈接只有一個小的填充和保證金進行定位，從而拉開距離它只是從上面的兩個標題中的一點點？

Answer 1

將display: block;添加到您的.top樣式，然後相應地調整邊距和填充。

top a { 
     display: block; 
     /*color:red;*/ /* This works but I don't want this */ 
     padding:10px; 
     margin:20px; 

} 

工作小提琴：http://jsfiddle.net/jnz65/

Answer 2

當它被指定的href屬性的定位標籤不繼承父某些屬性。這就是爲什麼您需要將display:block專門添加到錨標籤的樣式。