Wie fügt man dem Layout-Container in Angular ngMaterial nur Padding oder Rand hinzu?

Question

Wenn ich layout-margin oder layout-padding zu einem Layout-Container hinzufüge, fügt das Margin/Padding um jedes untergeordnete Element flex und den Container selbst hinzu.

Beispiel:

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

I Margen der Behälter hinzufügen möchten, und nicht auf die Kinder des Behälters.

Gibt es eine vordefinierte Klasse in Material Design Polsterung oder Spielraum, um das Layout Container hinzuzufügen, ohne sie an die Kinder im Layout-Container hinzufügen?

Answer 1

Sie können Klasseneltern für Container erstellen und CSS wie folgt schreiben.

.container { 
    margin : 20px; 
} 

Hoffe, das hilft!

Answer 2

zps215 hat die beste Antwort, auch wenn es ngMaterial nicht verwendet, ist der Effekt, den Sie suchen, am besten mit normalem CSS gelöst. Die bessere Lösung wäre jedoch, Padding für den übergeordneten Container statt für den Rand zu verwenden.

.container { 
    padding: 20px; 
} 

Allerdings, wenn Sie wirklich, wirklich es mit ngMaterial gelöst müssen Sie Ihre Markup in einem anderen div wickeln konnte und Layout-Marge, um es hinzuzufügen.

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

Dies würde die gleiche gewünschte Wirkung erhalten, obwohl es für jeden, der Kinder in diesem div fügt verwirrend bekommen könnte, da sie auch einen Spielraum bekommen würde.