微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何设置填充以延伸到父容器的顶部和底部边缘?

如何解决如何设置填充以延伸到父容器的顶部和底部边缘?

如何将内边距设置为延伸到父容器的顶部和底部边缘? 例如,在这case 中,我如何设置填充以使底部填充恰好在导航栏结束的位置结束(与显示的不同,它超出的位置)?这将确保与链接对应的整个区域都是可点击的,但不会超出导航栏的底部

nav {
  background: rgb(255,99,71);
  height: 50px;
}

a {
  padding-bottom: 35px;
  background-color: rgb(0,128,128);
}
<nav>
  <a href="#">Hello</a>
  <a href="#">About</a>
</nav>

解决方法

有很多方法可以做到这一点,但一种方法是根本不设置填充。类似以下内容将起作用:

a {
    display: inline-flex;
    line-height: 50px;
    background-color: rgb(0,128,128);
}

同样,有很多方法可以实现您的愿望,但这只是一种方法。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。