---
title: "Margin properties"
date: "2017-11-11T12:47:14+00:00"
summary: "Learn how to set margins on elements using top, bottom, left, right, and equal properties. Discover accepted units, expected values, and best practices for precise layout control in web design."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/margin-properties"
id: "181b205b-32e4-4e44-b9d9-06734c9f368b"
---

Set the Margin Top, Bottom, Left and Right on an element. Use Margin equal to set equal margins on all sides.

Margin top, bottom, left and right
----------------------------------

Set the outer margin of an element using the **Margin top**, **Margin bottom**, **Margin left** and **Margin right** fields.

### Expected value:

*   Enter a number
*   Negative values are accepted

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings")
*   **px** - The value will be applied in pixels
*   **%** - The value will be applied as a percentage of the parent elements width

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)

Margin equal
------------

Set the outer margin on all sides of an element.

**Note:** Individual sides override margin equal.

### Expected value:

*   Enter a number
*   Negative values are accepted

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings")
*   **px** - The value will be applied in pixels
*   **%** - The value will be applied as a percentage of the parent elements width

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)