# Box Model Editor

Starting from **ONEWEB version 5.0.21.01**, Page Designer introduces an enhanced **Box Model Editor** with a more **interactive and visual UI**.\
This editor allows users to configure **margin and padding** for UI components in a more intuitive way, making layout fine‑tuning faster and more precise.

The Box Model Editor is especially useful for:

* Adjusting spacing between components
* Aligning elements accurately
* Refining layout without manually entering CSS values

***

### What Is the Box Model Editor?

The Box Model Editor provides a **visual representation of the CSS box model**, showing:

* Padding
* Margin
* The component boundary

Users can interact directly with this visual layout to adjust spacing.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FXJyksryNVzw0vQHAUtuJ%2Fimage.png?alt=media&#x26;token=fc72f3c5-f826-4e51-a24b-f6eadcad16b0" alt=""><figcaption></figcaption></figure>

***

### Adjust Margin and Padding Using Drag Interaction

With the updated Box Model Editor, users can:

* Increase or decrease **margin** by dragging the outer edges
* Increase or decrease **padding** by dragging the inner edges
* Adjust spacing independently on each side (top, right, bottom, left)

This drag‑based interaction provides immediate visual feedback on how spacing changes affect the layout.

***

### Manual Value Entry (Alternative Method)

For users who prefer precise control, the Box Model Editor also supports **manual value entry**.

#### How to Enter Values Manually

1. Double‑click on the corresponding side (margin or padding)
2. An input field appears
3. Enter the desired numeric value

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FzBuc72a95Sh7wLAyklDc%2Fimage.png?alt=media&#x26;token=cb57bc46-e128-4bea-8674-7c2d277f2682" alt=""><figcaption></figcaption></figure>

This method is useful when:

* Exact spacing values are required
* Matching a design specification
* Aligning with design system standards

***

### Benefits of the Updated Box Model Editor

The new Box Model Editor offers several advantages:

* Faster layout adjustments
* Improved visual clarity of spacing
* Reduced trial‑and‑error compared to manual CSS input
* Better control over responsive layouts

It significantly enhances usability compared to earlier, non‑visual configuration methods.

***

### Design Perspective

As part of **Page Designer best practices**:

* Use the **drag interaction** for quick visual adjustments
* Use **manual input** when exact values are required
* Keep spacing consistent across similar components
* Avoid excessive padding and margin that may affect responsiveness

The Box Model Editor helps maintain **clean, balanced, and professional layouts** across pages.


---

# 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.onewebstack.com/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-components/pages/page-features/box-model-editor.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.