The Box Model in WebSite X5

Further information >

The Box Model in WebSite X5

Previous pageReturn to chapter overviewNext page

In WebSite X5 , Pages are created using the help of a Grid , and the layout can be perfected by adjusting the margins of the Objects contained in Cells. These can be modified using the options in the Margin and Alignment window, which is displayed upon clicking the Margins button in the tool bar in Step 4 - Page Creation.

In order to fully understand what is meant by Margin, and so correctly lay out the contents, it must be clear which Box Model is being used.

When you write a web page's code, all the HTML elements are considered as boxes and the parameters that define the visual aspect of each box is called a Box Model. Each box consists of a basic number of components - margins, borders, padding and the actual content - and each one can be modified with CSS properties.

The diagram below illustrates the various components of the Box Model:

Click to expand/collapse

In WebSite X5 the default page layout table has a number of cells to which the objects can be added. To be precise, each object is inserted in a sort of box which, in turn is placed inside a cell of the page layout table. Each cell has the Box Model shown.

The elements are:

Contents (in green): the contents are added to a cell by dragging one of the available objects into it.
Padding (in pink): this is the space between the object and the border of its box
Border: the border of the object's box. You can define the border's appearance in the Object Style window.
Margin (in yellow): this is the space between the border of the object's box and the borders of the page layout table.

Given these definitions, the space between two adjacent objects (horizontally or vertically) is equal to the margins defined for the cells that the objects have been placed in.