css - 如何在没有绝对和不包装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

将 a 添加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到锚标记的样式。