Come aggiungere padding o margine solo al contenitore di layout in Angular ngMaterial?

Question

Quando aggiungo layout-margin o layout-padding a un contenitore di layout, questo aggiunge margine/riempimento attorno a ciascun elemento figlio flex e al contenitore stesso.

Esempio:

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

voglio aggiungere margini per il contenitore e non ai bambini del contenitore.

C'è una classe predefinita in Materiale design per aggiungere padding o il margine al contenitore di layout senza aggiungerli ai bambini all'interno del contenitore di layout?

Answer 1

È possibile creare un genitore di classe per il contenitore e scrivere css come segue.

.container { 
    margin : 20px; 
} 

Spero che questo aiuti!

Answer 2

zps215 ha la migliore risposta, anche se non sta usando ngMaterial l'effetto che stai cercando è meglio risolto usando il normale CSS. Tuttavia, la soluzione migliore sarebbe utilizzare il padding sul contenitore padre anziché il margine.

.container { 
    padding: 20px; 
} 

Tuttavia, se avete davvero bisogno risolti con ngMaterial si potrebbe avvolgere la marcatura in un altro div e aggiungere il layout margine ad esso.

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

Questo potrebbe ottenere lo stesso effetto desiderato, anche se potrebbe creare confusione a tutti coloro che aggiunge i bambini che div come avrebbero ottenere un margine pure.