web-dev-qa-db-ja.com

Angular ngMaterialのレイアウトコンテナーにのみパディングまたはマージンを追加する方法は？

layout-marginまたはlayout-paddingをレイアウトコンテナーに追加すると、各flex子要素の周囲とコンテナー自体にマージン/パディングが追加されます。

例：

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

flex with margins

コンテナの子ではなく、コンテナにマージンを追加したいと思います。

margins to container only

マテリアルデザインに、レイアウトコンテナー内の子に追加せずにレイアウトコンテナーにパディングまたはマージンを追加するための定義済みクラスはありますか？

angularjsmaterial-designflexboxangular-material
10
Mustapha Aoussar

コンテナーの親クラスを作成し、次のようにcssを書き込むことができます。

.container {
   margin : 20px;
}

お役に立てれば！

4
Zeel Shah

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に子供を追加する人も、マージンを得るので混乱する可能性があります。

1
Voziv

あなたが使いたいと思います：class="md-padding"を親コンテナに追加します。

0
snackboy

これをお試しください、

<div layout="row" class=md-margin>
  <div flex>Parent layout and this element have margins.</div>
</div>
0
Özgür ÇATALKAYA