How to create Padding & Margin Setings

A page built in Elementor is structured in

• Sections
• Columns
• Widgets with content

All 3 elements can have padding and margin

The margin controls how much space is outside the border of the element you are editing. The padding controls how much space is inside the border and the content of the element you are editing.

How to change the Padding and Margin values based on screen sizes in Elementor?

Elementor has responsive options for adding spaces such as margin and padding to your widgets. For instance, if you set the padding for an element, it might look fantastic on the desktop, but it will get too big in smaller devices. You can set a different padding and margin value for each of your widgets in Elementor.

In order to change the padding and margin values based on different screen sizes follow the steps below:

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the left dashboard, drag and drop any widget you want to change its padding and margin based on different screen sizes.

4. A new dashboard on the left will open with the element’s settings. 

5. From the Advanced tab, set the Margin or Padding values.

6. Click on Desktop icon and two more device sizes mode will appear where you can set a different values for each of them individually.

7. Update the page.