Compatibility:

WebSite X5 Evo and Pro

A good page layout does not depend only on the contents you add, but also on the space you leave between one element and another. If texts, images, and buttons are too close together, the Page may look crowded and become more difficult to read.


In WebSite X5, you can adjust the Object Margins to control the space around individual contents and define their alignment within the Grid Cells.


How to set Object margins and alignment

To change the space around an Object:

  • Go to Step 4 - Page Creation.
  • Select the Object you want to work on.
  • Click the Margins button. 
  • In the Margins and Alignmentwindow, use the available commands to:
    • adjust the Outer Margin;
    • adjust the Inner Margin;
    • define the Object's horizontal and vertical alignment within the Cell containing it.
  • Confirm the changes.


What is the difference between inner and outer margins?

To use Margins correctly, it is important to understand which space is being adjusted.


Each Object added to the Grid occupies a container within a Cell. You can therefore distinguish between:

  • Content: the text, image, or any other element added through the Object.
  • Inner Margin: the space between the Object content and the edge of its container.
  • Border: defines the edge of the Object container and can be customized through the Object Style settings.
  • Outer Margin: the space between the Object container and the boundaries of the Grid Cell.


If two Objects are placed next to each other, horizontally or vertically, the space between them therefore depends on the combination of their respective Outer Margins.


How to align an Object within a Cell

From the same Margins and Alignment window, you can decide how the Object should be positioned within the available space inside the Cell.


You can adjust the alignment:

  • horizontally, to define the Object position from left to right;
  • vertically, to define its position from top to bottom.


These settings are particularly useful when the Cell is larger than the content and you want to control its position precisely.


When to use Object Margins and when to use Section Margins

With WebSite X5, you can adjust the space on the Page at two different levels: on a single Object or on the entire Section.


Use the Object Margins when you want to:

  • adjust the space around specific content;
  • space an Object away from other nearby elements;
  • control its position within the Cell.


Use the Section Margins instead when you want to increase the space above or below an entire area of the Page, visually separating it from the previous or following Sections.


The two types of Margins can be used together: simply choose the one that acts on the level of the structure you want to modify.


#tip - For more information on Section Margins, see Section Style. How do you create a strip with background, margins, and borders?