> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nettify.no/llms.txt
> Use this file to discover all available pages before exploring further.

# Change spacing and size

> Adjust padding, margin, width and height of elements

## What is spacing?

Spacing is about the space around and inside elements on your website. Good spacing makes the website easier to read and more visually appealing.

<Info>
  **Padding** = space **inside** an element (between the edge and the content).
  **Margin** = space **outside** an element (between the element and its neighbors).
</Info>

***

## How to adjust spacing

<Steps>
  <Step title="Select the element">
    Click **"Select element"** and click on the element you want to adjust spacing for.
  </Step>

  <Step title="Find the Spacing tool">
    In the panel you'll see the **Spacing** section with visual controls for padding and margin. You can adjust all four sides (top, right, bottom, left) individually.
  </Step>

  <Step title="Change the values">
    Enter values in pixels (px) to adjust the spacing. Changes show in real-time.
  </Step>
</Steps>

***

## Change size

You can also change the width and height of elements:

<CardGroup cols={2}>
  <Card title="Width" icon="arrows-left-right">
    Set the width in pixels. Useful for adjusting the size of images, boxes and columns.
  </Card>

  <Card title="Height" icon="arrows-up-down">
    Set the height in pixels. Use this to make sections taller or shorter.
  </Card>
</CardGroup>

***

## Common adjustments

<AccordionGroup>
  <Accordion title="More space around text">
    Increase **padding** on the section containing the text. Try 40-60px for a spacious feel.
  </Accordion>

  <Accordion title="More distance between sections">
    Increase **margin** (bottom) on the section above, or **margin** (top) on the section below.
  </Accordion>

  <Accordion title="Make a button bigger">
    Increase **padding** inside the button to make it bigger without changing the font size.
  </Accordion>

  <Accordion title="Center content">
    Set equal margin on left and right sides to center an element.
  </Accordion>
</AccordionGroup>

<Tip>
  **Don't be afraid to experiment!** You can always click **"Revert to published version"** to go back.
</Tip>