Menu
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?
804
To add padding and margin to all React Material-UI components, we can use the Box component. We use Material UI's Box component to add a container with margin and padding. We set the margin on all sides with the m prop and we set the top padding with the pt prop.
In CSS, a margin is the space around an element's border, while padding is the space between an element's border and the element's content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.
Please try this ,
<div layout="row" class=md-margin>
<div flex>Parent layout and this element have margins.</div>
</div>You can create class parent for container and write css as follows.
.container {
margin : 20px;
}
Hope this helps!
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
