如何定位样式锚元素没有绝对和没有包装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专门添加到锚标签的样式。