Angular 路由器插座占用页面上的额外空间（角度2）

这是一个有趣的问题，直到现在我都忽略了。 看起来Angular2在指令标记内呈现内容。但是，对于路由器出口，它恰巧像一个兄弟姐妹

我的第一个问题是：为什么？只是出于兴趣

我不会太担心它，但现在它实际上在我的应用程序中造成了一个问题。我有两个嵌套的插座，出于某种莫名其妙的原因，子插座在页面上的高度是15px，不管我做什么，我都无法摆脱它。（见截图）

我所描述的是真的吗？还是我只是做错了什么？ 还有，我现在不知道该怎么做，到处搜索，什么也没找到

谢谢你的帮助

更新 这是我的less文件：

@import "../../node_modules/bootstrap-less/bootstrap/bootstrap";
@import "../../node_modules/font-awesome/less/font-awesome";
@icon-font-path: "./bootstrap/fonts/";
@fa-font-path: "./font-awesome/fonts";
@import "rrm.less";

html, body {
  height: 100% !important;
}
body {
  padding-top: 80px;
}
.load-container {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  .loaing {
    position: fixed;
    left: 50%;
    top: 35%;
    z-index: 1000;
    height: 31px;
    width: 31px;
  }
}
.top-navbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #FFFFFF;
  height: 80px;
  &.floating {
    .box-shadow(0 1px 3px rgba(0,0,0,.25));
  }
  .navbar-brand {
    height: auto;
    img {
      height: 60px;
    }
  }
  .navbar-nav > li > a {
    font-size: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 50px;
  }
}
.rrm-container {
  height:100%;
  display: table;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 0px;
  padding-right: 0px;
  .rrm-wrapper {
    height: 100%;
    display: table-row;
    .left-menu {
      float: none;
      display: table-cell;
      .box-shadow(0 1px 3px rgba(0,0,0,.25));
      ul {
        li {
          border: none;
          background-color: transparent;
        }
      }
    }
    .content {
      float: none;
      display: table-cell;
    }
  }
}

下面是FF计算的盒子模型：

---

关于为什么将组件模板作为

的兄弟而不是放在它里面的第一个问题，有几个github线程可以说明一些问题

最相关的：

此行为的最初原因是启用视图之间的元素动画，在此期间源组件和目标组件都需要处于活动状态

---

我知道这是一个非常古老的问题，但我最近遇到了这个问题，并对其原因进行了调查。我希望这对某人有帮助

很难确定问题，因为当我检查元素时，它似乎只是一个空白

最后，问题是由路由器出口内的托管组件引起的，即包含页边顶部的段落标记。我将p标签的边距顶部设置为0，问题就消失了

---

我只发现这是因为上面的评论指出行高0解决了这个问题。但它只是子元素向下推页面的一个边距（奇怪）。

你能创建一个允许复制的Plunker吗。在

的大小为

0x0

的情况下，这显然是CSS问题（我甚至知道到底是什么原因导致的）。但是为了证实我的猜测，你应该分享应用于

路由器插座
元素的样式。@GünterZöchbauer我尝试了plunker，并复制粘贴了我的整个css。我无法复制它…您是否在应用程序中添加了一些可能会影响
的CSS，而您没有在Plunker中添加这些CSS？我只更改了main.CSS[863186328636]上的三行。这个问题与firefox如何使用display
table-*
呈现元素有关。我将与您的问题相关的更改为
flex
display。但是您还有许多其他的
display:table-*