Jak dodać dopełnienie lub margines tylko do kontenera układu w Angular ngMaterial?

Question

Po dodaniu layout-margin lub do kontenera układu dodaje to margines/dopełnienie wokół każdego elementu podrzędnego flex i do samego kontenera.

Przykład:

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

chcę dodać marginesy do pojemnika, a nie do Childrens pojemnika.

Czy istnieje predefiniowany klasa w dziale projektowania, aby dodać margines lub dopełnienie do pojemnika układ bez dodawania ich do Childrens wewnątrz pojemnika układu?

Answer 1

Możesz stworzyć rodzica klasy dla kontenera i napisać css w następujący sposób.

.container { 
    margin : 20px; 
} 

Mam nadzieję, że to pomoże!

Answer 2

zps215 ma najlepszą odpowiedź, mimo że nie używa ngMaterial, efekt, którego szukasz, najlepiej rozwiązać za pomocą normalnego CSS. Jednak lepszym rozwiązaniem byłoby użycie wypełnienia na pojemniku nadrzędnym zamiast na marginesie.

.container { 
    padding: 20px; 
} 

Jednakże, jeśli naprawdę naprawdę trzeba go rozwiązać z ngMaterial można owinąć znaczników w innym div i dodać layoutu margines do niego.

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

Byłoby uzyskać ten sam pożądany efekt, choć może uzyskać mylące dla każdego, kto dodaje dzieci do tego div jak dostaną margines, jak również.