How to add padding or margin only to the layout container in Angular ngMaterial?

Question

When I add layout-margin or layout-padding to a layout container this adds margin/padding around each flex child element and to the container itself.

Example:

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

I want to add margins to the the container and not to the childrens of the container.

Is there a predefined class in Material Design to add padding or margin to the layout container without adding them to the childrens inside the layout container?

Answer 1

Please try this ,

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

Answer 2

You can create class parent for container and write css as follows.

.container {
   margin : 20px;
}

Hope this helps!