# Padding and Margin

Padding and margin are essential concepts in page design that contribute to the overall layout and spacing of elements.

Padding refers to the space between the contents of an element and its border. It allows you to create breathing room within an element, adding space around its content. By adjusting the padding, you can control the distance between the content and the edges of the element. This helps to enhance readability, create visual separation, and maintain a harmonious balance within the design.

Margin refers to the space outside the border of an element, creating a gap between adjacent elements. It determines the distance between elements and affects the overall spacing and alignment on the page. By manipulating the margin, you can control the spacing between elements, achieving a desired visual hierarchy, and improving the overall aesthetics of the layout.

It's important to understand and use padding and margin effectively in page design to create visually appealing and well-structured layouts. Careful consideration of padding and margin ensures proper spacing, readability, and an overall pleasing user experience.

***

## Adjustments using Design Tab

The video below demonstrates both padding and margin adjustments in the Page Editor using the [Design Tab](/app-editor/page-editor/page-element-settings.md#design-tab). Please refer to its labelled chapters for more information on the adjustments being made.

{% embed url="<https://youtu.be/eH7L7Uo2A4Y>" %}
Video: Adjusting padding and margin
{% endembed %}

***

## Adjustments using CSS

You can also adjust the padding and margin by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings.md#custom-css-classes) setting.&#x20;

In addition to the option of using your own CSS files and specifying the classes, you also have the option of using pre-made padding and margin utility classes from [Bootstrap](https://getbootstrap.com/docs/4.6/utilities/spacing/) which Zingy supports. Some of these are detailed below.

{% hint style="info" %}
The size term mentioned below is a number from 0 through 5, with 5 representing the highest amount and 0 representing none.
{% endhint %}

| CSS Class Pattern                       | Description                               | Example CSS class                                 |
| --------------------------------------- | ----------------------------------------- | ------------------------------------------------- |
| <p>m-<\<size>>/</p><p>p-<\<size>></p>   | Sets the margin/padding in all directions | <p>m-0 through m-5/</p><p>p-0 through p-5</p>     |
| <p>mx-<\<size>>/</p><p>px-<\<size>></p> | Sets the left and right margins/paddings  | <p>mx-0 through mx-5/</p><p>px-0 through px-5</p> |
| <p>my-<\<size>>/</p><p>py-<\<size>></p> | Sets the top and bottom margins/paddings  | <p>my-0 through my-5/</p><p>py-0 through py-5</p> |
| <p>mt-<\<size>>/</p><p>pt-<\<size>></p> | Sets the top margin/padding               | <p>mt-0 through mt-5/</p><p>pt-0 through pt-5</p> |
| <p>mb-<\<size>>/</p><p>pb-<\<size>></p> | Sets the bottom margin/padding            | <p>mb-0 through mb-5/</p><p>pb-0 through pb-5</p> |
| <p>ml-<\<size>>/</p><p>pl-<\<size>></p> | Sets the left margin/padding              | <p>ml-0 through ml-5/</p><p>pl-0 through pl-5</p> |
| <p>mr-<\<size>>/</p><p>pr-<\<size>></p> | Sets the right margin/padding             | <p>mr-0 through mr-5/</p><p>pr-0 through pr-5</p> |

In addition to the above utility classes, [Bootstrap](https://getbootstrap.com/docs/4.6/utilities/spacing/) also offers responsive versions of the above using the symbols lg, md and sm to desktop, tablet and mobile screen sizes.

e.g. mb-lg-5 would set the bottom margin only on desktops, whereas px-md-2 would set the left and right paddings on tablets and larger screen devices. Another example is mt-sm-3 would set the top margin on mobile and larger screen devices.

Please refer to [Bootstrap](https://getbootstrap.com/docs/4.6/utilities/spacing/) documentation for more detailed information.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zingy.ai/app-editor/page-editor/padding-and-margin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.