---
title: How to Change Padding & Margins
slug: how-to-change-padding-and-margins
docTags: 
createdAt: 2025-07-14T18:10:59.611Z
---

## Introduction

**Padding and margins** are key layout tools that control spacing within and around elements on your website. While they might seem similar, they serve distinct purposes:

- **Padding** adds space *inside* an element—between the content (like text or an image) and its border.
- **Margin** creates space *outside* an element—between that element and surrounding elements or sections.

Adjusting these settings helps improve **visual balance**, **readability**, and **mobile responsiveness**. Whether you're tightening space around a headline or creating breathing room between page sections, learning how to fine-tune padding and margins ensures your site layout feels clean, consistent, and professional across all device types.

## Navigating to the Editor

- Open your Storagely Dashboard.
- Navigate to the Storage Website tab and select "My Websites"

  ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/a_vbokmc20-DnECIMXYlD_screenshot-2025-06-27-at-85431-am.png" size="38" width="388" height="559" position="flex-start" darkWidth="388" darkHeight="559" showCaption="false"}
- Select the website you want to edit from the list

  ![](https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/uaZq1w42uNsUr6u3KAqoI_screenshot-2025-06-27-at-93722-am.png)
- Click the top left **CMS** icon

  ::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf4j45XiRtVZTpVDOGqnd5eTRfUWgHtG0ap1l0mWCIvOt92DTp8qLrEgZz4HUN3otNt4c0OCvvGVxfOCGFXohqRtm5gf-e2U9JhgT46b9WIOefP3ex3xysKC1NEiIOQpMeSQTo65UADXpigU276ptE?key=SJqjgkT2K-F-F71wGPZjBw" size="10" width="96" height="112" position="flex-start" darkWidth="96" darkHeight="112" showCaption="false"}
- Click the page containing the website information you’d like to update.

  ![](https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/mhmRpK6q7K8ZkFwcu-if6_screenshot-2025-06-27-at-111805-am.png)
- Scroll to the section or content block where you want to adjust the **padding** or **margins**.
- Step-by-step instructions to change padding or margins within a section or  block:

## To adjust padding:

- Click the element (e.g., text, image, column, or block).
- In the toolbar, click the **gear icon**.

  ::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeJqF6USwpG6mH766D-4FLWBdWQDitE0adfyTJ1HaaUrUYeYQHfTzl3lnWNfmtKdOuJOQWEoM3CUYa1wG7jl50cqzuLeMfL8nuyKlDoUTFl9Hfpgp11mqNlq40lm51TPMO_YsqiJJpl3Afbd8nmcw?key=SJqjgkT2K-F-F71wGPZjBw" size="52" width="486" height="70" position="flex-start" darkWidth="486" darkHeight="70" showCaption="false"}
- Use the sliders or manual input fields on the right side to adjust Top, Bottom, Left, or Right padding and margins.

  ::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd0qcmDQCPZ7kcxxN1bduh8H8TZr5LRm4qQ6XimbkLGaCzgLX4p-3_S-HBwJlYgKp5Mkz0gR9szQm8LqT8kHSfQ9-9l4NNK-eK8lTNweif-RYQfegOW8wP1kUGCRBW-wGrSs4WVtYPxEzHqdi7eOlo?key=SJqjgkT2K-F-F71wGPZjBw" size="34" width="267" height="203" position="center" darkWidth="267" darkHeight="203" showCaption="false"}

::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcnqJD9TOaHh0iOs3xPtxI-3_R_ET9KpP37a5e6is3MRzbSlj7SygEW50kKhmhgqaCyDa9WkcQ4QoBAxc0-B6eiBv_XFZIYVruZ2AO9jucVzpuYMaun5ARODw-tQLYPEtodSbMadFN6sa51fsjnTog?key=SJqjgkT2K-F-F71wGPZjBw" size="34" width="267" height="467" position="center" darkWidth="267" darkHeight="467" showCaption="false"}

- Watch the live preview to see changes in real time.
- [Review the changes made in all 3 device types](https://docs.storagely.io/storagely-product/how-to-make-changes-on-desktop-tablet-and-mobile) (**desktop, tablet, mobile**) to ensure they look correct.

  ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/Fn92sU2I7YeGqrQtHaSms_3-devices.png" size="32" width="355" height="818" position="flex-start" darkWidth="355" darkHeight="818" showCaption="false"}
- If you want to save the update made, select “Update” in the bottom right corner of the window. Then close the tab. 

## ✅ Padding & Margin Best Practices

✅ **Note: Padding is internal spacing, while margin controls the space outside an element. **Use padding to create breathing room inside a section or block. Use margin to add space between blocks, sections, or other page elements.

✅ **Keep spacing consistent across your site: **Use the same top/bottom padding for similar sections (e.g., hero, features, testimonials) to maintain visual rhythm and alignment.

## 🎥 Watch Tutorial Video:

:::Iframe{iframeHeight="0" code="<iframe src=&#x22;https://relay.apps.storagely.app/share/B8Bd3Oj9iuCSQAUc&#x22; width=&#x22;640&#x22; height=&#x22;360&#x22; frameborder=&#x22;0&#x22; allow=&#x22;autoplay; fullscreen&#x22; allowfullscreen></iframe>"}

:::

*As always, if you have any questions during this process, our Customer Success Team is here to help. The best way to reach us is by submitting a support ticket.*

**[Submit a Ticket](https://d1s7s.share.hsforms.com/297GkKIsiTSmDgSKUYT9s2g)**