A
V
Margin
Definition and Usage
The Margin utility sets the outer spacing around elements using the CSS margin property. It helps control the distance between elements, creating clear separation and improving overall layout flow.
Margin in pixels
Definition and Usage
The Margin in Pixels utility applies fixed pixel values to the margin property, allowing precise control over the outer spacing of elements. It’s useful when you need exact spacing rather than relying on scalable units like rem or %.
Examples
| Property | Value |
|---|---|
| Mn1 | margin: 1px; |
| Mn50 | margin: 50px; |
| Mn100 | margin: 100px; |
Note
The range of margin values is from 0 to 100.
Individual Margin
Definition and Usage
Individual Margin utilities apply spacing to one specific side of an element using the CSS margin properties: margin-top, margin-right, margin-bottom, and margin-left. This gives developers precise control over layout spacing without affecting all sides.
Margin Top
Definition and Usage
The Margin Top utility applies spacing to the top of an element using the margin-top CSS property. It’s useful for creating vertical separation between stacked elements or pushing content downward in a layout.
Examples
| Property | Value |
|---|---|
| MnTp1 | margin-top: 1px; |
| MnTp50 | margin-top: 50px; |
| MnTp100 | margin-top: 100px; |
Note
The range of margin-top values is from 0 to 100px.
Margin bottom
Definition and Usage
The Margin Bottom utility adds spacing below an element using the margin-bottom CSS property. It’s commonly used to create vertical space between stacked elements or sections in a layout.
Examples
| Property | Value |
|---|---|
| MnBm1 | margin-bottom: 1px; |
| MnBm50 | margin-bottom: 50px; |
| MnBm100 | margin-bottom: 100px; |
Note
The range of margin-bottom values is from 0 to 100px.
Margin Left
Definition and Usage
The Margin Left utility sets spacing on the left side of an element using either pixel or percentage values. This is helpful for positioning elements, adding horizontal space, or aligning items within a layout.
Examples
| Property | Value |
|---|---|
| MnLt1 | margin-left: 1px; |
| MnLt50 | margin-left: 50px; |
| MnLt100 | margin-left: 100px; |
Note
The range of margin-left values is from 0 to 100px.
Margin Left in percentage
Definition and Usage
The Margin Left in Percentage utility applies horizontal spacing to the left side of an element using the margin-left property with percentage values. This creates responsive spacing that scales relative to the width of the parent element.
Examples
| Property | Value |
|---|---|
| MnLt1p | margin-left: 1%; |
| MnLt5p | margin-left: 5%; |
| MnLt10p | margin-left: 10%; |
Note
The range of margin values is from 1 to 10.
Margin Right
Definition and Usage
The Margin Right utility applies spacing to the right side of an element using the margin-right CSS property. It helps manage horizontal alignment, control spacing between elements, and structure content in both flex and grid layouts.
Examples
| Property | Value |
|---|---|
| MnRt1 | margin-right: 1px; |
| MnRt50 | margin-right: 50px; |
| MnRt100 | margin-right: 100px; |
Note
The range of margin-right values is from 0 to 100px.
Margin right in percentage
Definition and Usage
The Margin Right in Percentage utility applies horizontal spacing to the right side of an element using the margin-right property with percentage values. This type of spacing adjusts relative to the width of the parent container, making it ideal for responsive design.
Examples
| Property | Value |
|---|---|
| MnRt1p | margin-left: 1%; |
| MnRt5p | margin-left: 5%; |
| MnRt10p | margin-left: 10%; |
Note
The range of margin-right values is from 1 to 10.
Margin Top Bottom
Definition and Usage
The Margin Top and Bottom utility applies vertical spacing to an element using both the margin-top and margin-bottom properties. This helps maintain consistent spacing above and below elements without affecting the left or right margins.
Examples
| Property | Value |
|---|---|
| MnTpBm1 | margin-top: 1px; margin-bottom: 1px; |
| MnTpBm50 | margin-top: 50px; margin-bottom: 50px; |
| MnTpBm100 | margin-top: 100px; margin-bottom: 100px; |
Note
The range of margin-top-bottom values is from 0 to 100px. By using this property you can add top and bottom margin at the same time.
Margin Left Right
Definition and Usage
The Margin Left and Right utility applies equal horizontal spacing on both sides of an element using the margin-left and margin-right properties. It's useful for centering, spacing elements side-by-side, and maintaining a consistent horizontal rhythm.
Examples
| Property | Value |
|---|---|
| MnLtRt1 | margin-left: 1px; margin-right: 1px; |
| MnLtRt50 | margin-left: 50px; margin-right: 50px; |
| MnLtRt100 | margin-left: 100px; margin-right: 100px; |
Note
The range of margin-left-right values is from 0 to 100px. By using this property you can add left and right margin at the same time.