Guida al CSS per EPUB – Impostare i margini

Nella puntata precedente abbiamo visto alcune delle proprietà che dobbiamo modificare, per cambiare l’aspetto di un paragrafo o della pagina: è un buon inizio, per posizionare correttamente un elemento, ma ancora non basta, soprattutto se siamo interessati a controllare gli spazi tra un elemento e l’altro (le famigerate righe vuote tra i paragrafi, insomma, contro cui spesso ci si trova a dover combattere). Se convertiamo un documento con Calibre, e non prestiamo attenzione a tutti i valori da impostare, molto spesso ci troveremo coi paragrafi separati tra loro da fastidiose linee bianche, proprio come accade quando scriviamo qualcosa in Sigil. Per capire cosa siano e imparare a evitarle o eliminarle, dobbiamo prima osservare come il CSS gestisca lo spazio nello HTML. Pensiamo a un tag HTML (e al suo contenuto) come a una porzione di spazio, uno dei mattoncini LEGO che formano la pagina. Ognuno di questi tag, in linea di massima, è rappresentato come un rettangolo, più o meno grande a seconda dei casi: il tag <body> è un rettangolo grande quanto la pagina intera, il tag <p> è grande quanto il paragrafo contenuto, il tag <h1> sarà grande invece quando la riga di titolo corrispondente, e così via. Una pagina è dunque un muro, composto da tanti mattoni, di dimensione diversa: ogni tag è un mattone e il contenuto del tag determina la grandezza del mattone. Il CSS ci permette di impostare e controllare tre proprietà spaziali, per ogni mattone: margin, padding e border. Border è il più semplice di tutti: è il perimetro del rettangolo e possiamo usarla per disegnare una “cornice” attorno a un elemento. Padding è lo spazio vuoto tra il bordo e il contenuto interno: se abbiamo deciso di racchiudere un paragrafo in una cornice, usando border, padding ci dirà quanto spazio bianco vedremo tra la cornice e il testo del paragrafo. Margin, infine, è lo spazio che separa il bordo di un tag dal bordo dei tag che lo circondano: è lo spazio che fa da cuscinetto tra un mattone e l’altro, separandoli. L’insieme di questi tre elementi forma il cosiddetto “modello a box”, nel CSS. Guida al CSS per EPUB – Impostare i margini

In breve, border segna il confine di un elemento, padding è lo spazio interno tra il confine e il contenuto dell’elemento, margin è lo spazio esterno tra il confine e gli altri elementi che lo circondano. Ognuna di queste tre proprietà può essere impostata individualmente, per ognuna delle quattro direzioni, oppure può essere impostata con un comando solo per tutti e quattro i lati. Inoltre, ognuna può essere impostata a zero, se vogliamo eliminare le formattazioni automatiche di alcuni tag (tipo <p>).

padding

Come detto, è lo spazio che separa il contenuto di un elemento dal suo bordo: se vogliamo disegnare una cornice attorno al testo, padding è la proprietà che dovremo impostare, per lasciare un certo spazio tra il bordo e il testo. Se un elemento utilizza la proprietà background-color, per colorare lo sfondo, allora anche la fascia di padding sarà colorata, in quanto è interno all'elemento. A seconda dei casi, possiamo utilizzare una delle quattro varianti “locali” di padding, per impostarlo solo su un lato, oppure possiamo usare direttamente padding, per impostarlo in una volta sola su tutti e quattro i lati. Le quattro varianti sono padding-top, padding-right, padding-bottom, padding-left, sistemate come nella immagine soprastante: per ognuna possiamo indicare una delle unità di misura permesse dal CSS, per indicare quanto spazio lasciare. Ad esempio,

padding-top: 5px;

padding-left: 10px;

lasciano rispettivamente uno spazio vuoto di cinque pixel sopra il contenuto dell’elemento, e uno spazio vuoto di dieci pixel a sinistra del contenuto. Se invece scriviamo padding: 5px 10px 5px 10px; possiamo impostare in una volta sola la distanza per tutte e quattro le direzioni: in questo caso, il primo numero sarà la distanza in alto, il secondo la distanza a destra, il terzo la distanza in basso e il quarto la distanza a sinistra. Se vogliamo usare questa proprietà “unica”, è importante ricordare il corretto ordine: alto-destra-basso-sinistra, ossia top-right-bottom-left. Per memorizzare la sequenza, partite da sopra e muovetevi in senso orario. Se invece li impostiamo individualmente, non è importante seguire un ordine. Infine, se vogliamo assegnare lo stesso valore a tutti e quattro i lati, possiamo utilizzare una formula ancora più breve, ossia padding: 10px; In questo modo, tutti e quattro i lati avranno un margine interno di dieci pixel (o di qualsiasi altro numero indicheremo).

margin

Come detto, è lo spazio che separa questo elemento dagli altri elementi che lo circondano: il suo “spazio vitale”, se preferite pensarla così. Funziona esattamente come padding, in tutto e per tutto, ma non sarà colorato, se abbiamo impostato un valore per background-color, in quanto lo spazio di margin non fa parte del nostro elemento, ma è esterno. Avremo dunque margin-top, margin-right, margin-bottom e margin-left, come proprietà individuali, e margin come proprietà unica, che le riassume tutte quante. Ad esempio,

margin-top: 12px;

margin-right: 8px;

imposteranno il margine esterno a dodici pixel in alto (margin-top) e a otto pixel sulla sinistra (margin-left). Utilizzando invece la formula abbreviata, possiamo scrivere margin: 4px 5px 10px 6px; così imposteremo un margine in alto di quattro pixel, a destra di cinque pixel, in basso di dieci pixel e a sinistra di sei pixel. Se vogliamo usare lo stesso numero per tutti e quattro i lati, la formula abbreviata resta sempre margin: 5px; proprio come abbiamo già visto per padding. Queste due proprietà funzionano allo stesso modo e cambia solo il luogo in cui collocano lo spazio vuoto nell'elemento: margin lo colloca all'esterno del bordo, padding lo colloca all'interno del bordo.

border

Concludiamo proprio col bordo. La proprietà border disegna una cornice attorno a un elemento e, può essere utilizzata sia per tracciare questa cornice attorno a tutto l’elemento, sia per tracciarla solo su alcuni dei quattro lati. Come i suoi colleghi, dunque, anche border ha le versioni specifiche, ossia border-top, border-right, border-bottom e border-left, che tracciano il bordo soltanto sul rispettivo lato del nostro elemento, ma i valori da attribuire a queste proprietà sono alquanto diversi: per disegnare un bordo, infatti, dovremo assegnare valori come il colore, lo spessore e lo stile. Il primo valore che indichiamo, di solito, è lo spessore del bordo, espresso in pixel. Il secondo valore indica lo stile con cui sarà disegnato il bordo e lo possiamo scegliere tra i seguenti: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden. Solid è una normale linea chiusa, dotted è una linea punteggiata, dashed una linea tratteggiata, double una linea doppia, none elimina il bordo, hidden lo nasconde (di fatto ottiene lo stesso risultato di none, cioè il bordo non si vedrà, ma nascondere una cosa è diverso da eliminarla), mentre gli altri quattro producono particolari effetti grafici, più semplici da vedere che da descrivere. Infine, il terzo valore è il colore che il bordo dovrà avere e lo possiamo impostare seguendo le regole già viste prima, parlando degli attributi color e background-color. Qualche esempio: border: 2px dotted red; border-bottom: 1px solid rgb(0, 0, 255);

nel primo caso, tracceremo su tutti e quattro i lati un bordo punteggiato, dallo spessore di due pixel e di colore rosso; nel secondo caso, tracceremo sotto l’elemento un bordo solido, dallo spessore di un pixel e di colore blu (una sottolineatura blu, insomma). Possiamo utilizzare la forma abbreviata border, soltanto se vogliamo che il bordo sia identico su tutti e quattro i lati; se vogliamo disegnare bordi di spessore o di colore diverso, dovremo utilizzare le proprietà individuali per i quattro lati, ossia border-top, border-right, border-bottom e border-left. Non so perché qualcuno dovrebbe desiderare un bordo arlecchino e di dimensioni diverse, per una parte del proprio EPUB, ma questo è un altro paio di maniche: se il vostro senso estetico vi spinge in questa direzione, usate le quattro proprietà individuali; se siete tradizionalisti e volete un bordo uniforme su ogni lato, usate pure la formula abbreviata.
Ovviamente, border, margin e padding possono essere utilizzati su qualsiasi tipo di tag, ma non sempre otterremo il risultato previsto da noi. Lo HTML distingue infatti tra due tipi di tag, ossia quelli che creano un blocco nel testo e quelli che coabitano su una stessa linea. I tag <p> e <div> sono esempi tipici di tag che creano blocchi (servono proprio a dividere la pagina in sezioni logiche) e sono spesso accompagnati da una separazione grafica sullo schermo; i tag <b>, <span> e <a> sono esempi tipici di tag che coabitano su una stesa linea, senza dividere la pagina in blocchi. In caso di tag “in linea”, assegnare margini in alto e in basso non funzionerà come previsto, mentre i margini laterali non daranno problemi: non possiamo insomma usare padding-top o margin-bottom per aumentare lo spazio tra le linee. O almeno, non normalmente. Esiste infatti una proprietà particolare, che ci permette di decidere se un tag dovrà comportarsi come un blocco, oppure come un tag “in linea”: è la proprietà display. Se a un tag assegniamo il valore display: inline; quel tag coabiterà pacificamente sulla stessa linea con altri tag, a prescindere da quale sia il suo tipo; se invece gli assegniamo il valore display: block; quel tag creerà un blocco indipendente all'interno della pagina, proprio come il tag <p>, e potremo controllare i sui margini su tutti e quattro i lati.