Compatibility:

WebSite X5 Evo and Pro

When you create a well-structured layout, you have to make sure the contents are not bundled up. Adding too many contents on a page will lead to a chaotic result, a page which a visitor will probably find difficult to read and to appreciate. Blank spaces in these case are your best friends!


You can work on the Object margins in order to better manage the space between the different contents on a page.


That's what you need to do:

  • On Step 4 - Page Creation, select the Object to work on and click on the Margins button.
  • In the Margin and Alignment window you will find the commands to work on:
    • the outer margin;
    • the inner margin;
    • the horizontal/vertical alignment for the Object referred to the layout Grid where it is placed.


The WebSite X5 Box Model

Understanding the Box Model used by WebSite X5 is useful to improve the margin management and to better organize the content layout.


When the code of a Web Page is written, all the HTML elements are considered as blocks, or boxes, and the rules defining the visual aspect for such block elements are referred to as Box Model. Each Box includes a certain number of basic components which can be modified with CSS properties: margins, borders, padding and content.


The image below shows the part of the Box Model:



In WebSite X5, the layout Grid is made up of Cells where you can add the different Objects. More precisely, each Object is added into a container which is inserted into a Cell on the layout Grid. The mentioned Box Model is applied to each Cell.


Therefore, the elements are:

  • Content (green area): this is the content which is added by dragging and dropping one of the available Objects.
  • Inner margin (fuchsia area): this is the space between the current Object and the borders of its container.
  • Border: this is the Object container border; you can define the aspect of this border using the options in the Object Style section. 
  • Outer margin (orange area): this is the space between the Object container border and the layout Grid borders.


According to the above mentioned rules, the space between to flanked Objects (horizontally and vertically alike) corresponds to the sum of the Outer Margins set for the Cells containing them.