如何仅在Angular ngMaterial中的布局容器中添加填充或边距？

Question

当我将layout-margin或layout-padding添加到布局容器时，会在每个flex子元素和容器本身周围添加边距/填充。

示例：

<div layout="row" layout-margin>
  <div flex>Parent layout and this element have margins.</div>
</div>

我想在容器中添加边距，而不是容器的子节点。

在Material Design中是否有预定义的类来向布局容器添加填充或边距，而不将它们添加到布局容器内的子节点中？

Answer 1

您可以为容器创建类父级，并按如下方式编写css。

.container {
   margin : 20px;
}

希望这有帮助！

Answer 2

zps215有最好的答案，即使它没有使用ngMaterial，你正在寻找的效果最好用普通的CSS解决。但是，更好的解决方案是在父容器上使用填充而不是边距。

.container {
    padding: 20px;
}

但是，如果你确实需要用ngMaterial解决它，你可以将你的标记包装在另一个div中并为其添加布局边距。

<div layout-margin>
  <div layout="row">
    <div flex>Parent layout and this element have margins.</div>
  </div>
</div>

这会得到相同的预期效果，但是对于那些将孩子添加到该div的人来说可能会让他们感到困惑，因为他们也会获得保证金。

Answer 3

我相信您想在父容器上使用：class="md-padding"。

Answer 4

请尝试这个，

<div layout="row" class=md-margin>
  <div flex>Parent layout and this element have margins.</div>
</div>