border影响父元素的高度-解决方案

最新推荐文章于 2026-05-02 20:15:30 发布

原创

最新推荐文章于 2026-05-02 20:15:30 发布 · 1.3k 阅读

标签

#前端 #javascript #html

收录于

当在Menu组件中为子元素添加border-bottom时，父元素高度被撑开。尝试通过设置box-sizing属性未解决问题，因为未指定父元素宽高。最终解决方案是在子元素上添加透明边框，使其在点击时避免影响父元素高度。

现象：在为Menu组件添加样式时发现，当我点击某个tab时父元素的高度会撑开，原因是boder-bottom设置为2px，第一反应是将border-sizing设置为border-box，使得width和height属性包括内容，内边距和边框，但不包括外边距。但是无效，因为我没有为父元素设置宽高。

1655864862453

.menu{
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 30px;
    list-style: none;
    border-bottom: $menu-border-width solid $menu-border-color;
    box-shadow: $menu-box-shadow;
    >.menu-item {
      padding: $menu-item-padding-y $menu-item-padding-x;
      cursor: pointer;
      transition: $menu-transition;
      &:hover, &:focus {
        text-decoration: none;
      }
      &.is-disabled