Margin - pressden/emma GitHub Wiki
Margin is the amount of space added to the outside of an element. You can generally think of it as the space between elements. https://media.prod.mdn.mozit.cloud/attachments/2019/03/19/16558/29c6fe062e42a327fb549a081bc56632/box-model.png
Margins can be set to 6 different sizes, and margins on all 4 sides of an object can be set independently.
Margin classes follow the following format:
[location]-[size]
Location
m-[size]
- assign margin on all sidesmy-[size]
- assign margin on top and bottommx-[size]
- assign margin on left and rightmt-[size]
- assign margin on topmb-[size]
- assign margin on bottomml-[size]
- assign margin on leftmr-[size]
- assign margin on right
Size
[location]-0
- assign zero margin[location]-xs
- assign extra small margin (4px)[location]-sm
- assign small margin (8px)[location]-md
- assign medium margin (16px)[location]-lg
- assign large margin (32px)[location]-xl
- assign extra large margin (64px)
Examples
m-lg
- provides a large margin around all 4 sides of an elementmb-0
- removes any margin from the bottom of an elementmy-md
- provides a medium margin to the top and bottom of an elementmt-lg mb-0
- provides a large margin to the top, and removes any margin from the bottom of an element