CSS设置<a>标签为按钮后底部溢出父容器的解决方法

<a> 是默认的行内元素（inline），这类元素的垂直方向内边距（padding-top/padding-bottom）不会纳入父容器的高度计算逻辑，只会向元素上下两侧溢出。你给.btn设置的上下12px内边距就属于这种情况，最终按钮底部超出父容器边界出现裁切。

任选一种方案即可解决问题，优先推荐第一种：

• 给按钮设置display: inline-block：既保留行内元素可与其他行内内容同排的特性，又能让垂直内边距正常参与高度计算，完全撑开父容器

.btn{
    /* 新增这一行，原有样式全部保留 */
    display: inline-block;
    border-radius: 5px;
    text-decoration: none;
    line-height: 30px;
    padding: 12px 24px;
    background-color: #ff007a;
    color: white;
}

• 如果不需要按钮和其他内容同排，也可以直接设置为块级元素：

.btn{
    /* 新增这一行即可 */
    display: block;
    /* 其余原有样式不变 */
}

• 也可以给父容器触发BFC来包裹溢出内容，比如给.container加overflow: auto，但这个方案可读性不如直接修改按钮显示属性，不做优先推荐：

.container{
    width:400px;
    height: auto;
    margin: auto;
    border-style: dashed;
    border-color: black;
    /* 新增这一行 */
    overflow: auto;
}

修改后父容器的自动高度会完整包含按钮的总高度（行高+上下内边距），不会再出现底部溢出裁切的问题。

内容的提问来源于stack exchange，提问作者Niklas