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

【问题标题】：How to add padding or margin only to the layout container in Angular ngMaterial?如何仅向 Angular ngMaterial 中的布局容器添加填充或边距？
【发布时间】：2016-03-01 22:14:25
【问题描述】：

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

例子：

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

我想给容器添加边距，而不是给容器的子容器。

Material Design 中是否有预定义的类来为布局容器添加内边距或边距而不将它们添加到布局容器内的子元素中？

【问题讨论】：

标签： angularjs material-design flexbox angular-material

【解决方案1】：

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

.container {
   margin : 20px;
}

希望这会有所帮助！

【讨论】：

Uhhhmmm 我认为他的意思是使用 ngMaterial 而不是随机 CSS

【解决方案2】：

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

.container {
    padding: 20px;
}

但是，如果您真的需要使用 ngMaterial 解决它，您可以将您的标记包装在另一个 div 中，并为其添加 layout-margin。

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

这将获得相同的预期效果，尽管它可能会让任何将孩子添加到该 div 的人感到困惑，因为他们也会获得边距。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

请试试这个，

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

【讨论】：