In WebSite X5 le Pagine vengono create attraverso l'ausilio di una Griglia e l'impaginazione può essere perfezionata agendo sui margini degli Oggetti contenuti nelle Celle, modificabili grazie alle opzioni disponibili nella finestra Margine e Allineamento richiamata dal pulsante Margini presente nella barra strumenti del Passo 4 - Creazione della Pagina.
Per meglio comprendere cosa si intende per Margine e riuscire ad agire con precisione sull'impaginazione dei contenuti è necessario comprendere il Box Model utilizzato.
Quando si scrive il codice di una Pagina Web, tutti gli elementi HTML vengono considerati come dei blocchi (o box) e tutto l'insieme di regole che gestisce l'aspetto visuale di tali elementi blocco viene indicato come Box Model. Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS: margini, bordi, padding e contenuto.
L'immagine seguente illustra le parti del Box Model:
In WebSite X5 la Griglia di impaginazione proposta identifica una serie di Celle in cui è possibile inserire i diversi Oggetti. A voler essere più precisi, ogni Oggetto viene inserito in un contenitore che, a sua volta, è inserito all'interno di una Cella della Griglia di impaginazione. Per ciascuna di tali Celle si applica il Box Model illustrato.
Pertanto gli elementi sono:
| ▪ | Contenuto (area in verde): è il contenuto inserito attraverso il trascinamento di uno degli Oggetti disponibili. |
| ▪ | Margine interno (area in fucsia): è lo spazio tra l'Oggetto attuale e il bordo del suo contenitore. |
| ▪ | Bordo: è il bordo del contenitore dell'Oggetto; l'aspetto di tale bordo può essere definito attraverso le opzioni della finestra Stile dell'Oggetto. |
| ▪ | Margine esterno (area in arancio): è lo spazio tra il bordo del contenitore dell'Oggetto e i bordi della Griglia di impaginazione. |
Date queste definizioni, lo spazio tra due Oggetti affiancati (in orizzontale o in verticale) è pari alla somma dei Margini Esterni impostati per le Celle che li contengono.
