You can set individual margins and padding independently for top, bottom, left and right. You can set all of these values independently for large (desktop), medium (tablet), and small (phone) devices.

When you add a custom margin or padding setting to an individual row, column, or module, this setting is automatically used for medium devices as well, unless you specifically add a different setting for medium devices. For example, if you set a top margin on a row to 100 px, tablets will also display a top margin of 100px.

Note: Content modules only have margin settings, not padding settings.

How the value gets set for mobile devices depends on whether global auto spacing is enabled (default state) or not. For an explanation of how auto spacing works, see the Related Article on troubleshooting spacing on mobile devices. Without auto spacing, the small device setting inherits the medium device setting, which inherits the large device setting, unless you assign a custom setting.

To set margins and padding for an individual row, column, or module:

1. Open a row, column, or module for editing by clicking the wrench icon.
2. Click the Advanced tab.
3. Change the number of pixels of space for the top, bottom, left, or right margin as you like.
4. For rows and columns, change the number of pixels in the top, bottom, left, or right padding to add space between the boundary and the content inside.
5. Click the device icon next to each field to toggle the preview from desktop (large) to tablet (medium) to mobile (small). Check the settings for each device size and add custom values if you want. See the screenshot below that shows the device icon.
6. Click Save when you’re done editing.