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

现象：在为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 {
        color: $menu-item-disabled-color;
        pointer-events: none;
        cursor: default;
      }
      &.is-active, &:hover {
        color: $menu-item-active-color;
        border-bottom: $menu-item-active-border-width solid $menu-item-active-color;
      }
   }
}

解决：换一种方法解决，在menu-item添加border-bottom的样式与点击时的样式一样，但颜色设置为transparent就行！

 >.menu-item {
      padding: $menu-item-padding-y $menu-item-padding-x;
      cursor: pointer;
      transition: $menu-transition;
      border-bottom: $menu-item-active-border-width solid transparent;

      &:hover, &:focus {
        text-decoration: none;
      }
...

 

1655865242469