为什么顶部衬垫不适用于我的锚？

Question

我在另一个div里面的div里面有一个锚。由于某种原因，顶部填充不适用于它，但底部和侧面填充将。有谁知道为什么？

* {
    margin: 0;
    padding: 0;
}
.box a {
    border: 1px solid blue;
    padding: 60px 15px;
}

<div class="wrapper">
    <div class="box">
        <a>Test</a>
    </div>
</div>

Answer 1

它不起作用，因为默认情况下a是内联元素。如果你想像块一样对待它，你应该使它成为块或内联块（在这种情况下推荐）：

* {
    margin: 0;
    padding: 0;
}
.box a {
    border: 1px solid blue;
    padding: 60px 15px;
    display: inline-block;
}

<div class="wrapper">
    <div class="box">
        <a>Test</a>
    </div>
</div>

作为内联元素，a在内容基线上呈现。但即使应用了填充顶部/底部值（与内联元素忽略的margin-top / bottom不同），增加的填充也会导致元素高度的变化。然而，尽管高度（也被忽略）内联元素仍然在基线上呈现，这就是为什么更改padding-top / bottom不会在视觉上移动元素。

Answer 2

＆＃13;

＆＃13;

* {
    margin: 0;
    padding: 0;
}
.box a {
    border: 1px solid blue;
    padding: 30px 15px;
    line-height: 60px;
}

＆＃13;

<div class="wrapper">
    <div class="box">
        <a>Test</a>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

添加行高。上面更新的代码

Answer 3

您可以尝试将锚点放在带填充的div周围。这可能不是一个优雅的解决方案。