Fusione dei margini CSS
- Pagina precedente Margine CSS
- Pagina successiva Padding CSS
La sommatoria dei margini si riferisce al fatto che quando due margini verticali si incontrano, si formano un margine.
L'altezza del margine sommato è uguale al maggiore delle altezze dei margini che si sommano.
Sommatoria dei margini
La sommatoria dei margini (somma) è un concetto abbastanza semplice. Ma, nella pratica della layout del sito web, può causare molte confusione.
In breve, la sommatoria dei margini si riferisce al fatto che quando due margini verticali si incontrano, si formano un margine. L'altezza del margine sommato è uguale al maggiore delle altezze dei margini che si sommano.
Quando un elemento appare sopra un altro elemento, il margine inferiore del primo elemento si sommerà al margine superiore del secondo elemento. Guarda l'immagine sottostante:
Quando un elemento è contenuto in un altro elemento (supponiamo che non ci siano margini interni o bordi che separino i margini), i loro margini superiori e / o inferiori si sommeranno anche. Guarda l'immagine sottostante:
Anche se sembra strano, i margini possono anche sommarsi a se stessi.
Supponiamo di avere un elemento vuoto che ha margini, ma nessun bordo o riempimento. In questo caso, il margine superiore e inferiore si incontrano e si sommeranno:
Se questo margine incontra il margine di un altro elemento, si sommerà anche:
Ecco perché una serie di elementi paragrafi occupa pochissimo spazio, perché tutti i loro margini si sommano e formano un margine piccolo.
All'inizio, la sommatoria dei margini potrebbe sembrare strana, ma in realtà ha un senso. Prendiamo ad esempio una pagina di testo tipica composta da diversi paragrafi. Lo spazio sopra il primo paragrafo è uguale al margine superiore del paragrafo. Senza sommatoria dei margini, tutti i margini tra i successivi paragrafi sarebbero la somma del margine superiore e inferiore adiacenti. Questo significa che lo spazio tra i paragrafi sarebbe due volte maggiore rispetto alla cima della pagina. Se si verifica la sommatoria dei margini, i margini superiori e inferiori tra i paragrafi si sommeranno, rendendo le distanze uniformi.
Nota:Solo i margini verticali dei riquadri in flusso normale del documento si sommeranno. I margini tra i riquadri inline, i riquadri flottanti o i riquadri posizionati in modo assoluto non si sommeranno.
Tutte le proprietà di margine CSS
| Proprietà | Descrizione |
|---|---|
| margin | Proprietà abbreviate utilizzate per impostare le proprietà di margine in una singola dichiarazione. |
| margin-bottom | Impostare il margine esterno inferiore dell'elemento. |
| margin-left | Impostare il margine esterno sinistro dell'elemento. |
| margin-right | Impostare il margine esterno destro dell'elemento. |
| margin-top | Impostare il margine esterno superiore dell'elemento. |
- Pagina precedente Margine CSS
- Pagina successiva Padding CSS
