Modello di cornice: fusione dei margini CSS
- Pagina precedente Margine esterno CSS
- Pagina successiva Panoramica della posizionamento CSS
La fusione dei margini esterni si riferisce al fatto che quando due margini verticali si incontrano, formano un margine.
L'altezza del margine fondato è uguale al maggiore dei due margini che si fondono.
Fusione dei margini esterni
La fusione dei margini esterni (sovrapposizione) è un concetto piuttosto semplice. Ma, nella pratica della progettazione del layout web, può causare molte confusione.
In altre parole, la fusione dei margini esterni si riferisce al fatto che quando due margini verticali si incontrano, formano un margine. L'altezza del margine fondato è uguale al maggiore dei due margini che si fondono.
Quando un elemento appare sopra un altro, il margine esterno inferiore del primo elemento e il margine esterno superiore del secondo elemento si fonderanno. Guarda l'immagine sottostante:
Quando un elemento è contenuto in un altro (supponiamo che non ci siano margini interni o bordi che separino i margini esterni), anche i loro margini superiori e / o inferiori si fonderanno. Guarda l'immagine sottostante:
Anche se sembra strano, i margini possono anche fondersi con se stessi.
Supponiamo di avere un elemento vuoto, che ha un margine esterno ma non ha bordi o riempimento. In questo caso, il margine esterno superiore e inferiore si toccano insieme e si fondono:
Se questo margine incontra il margine di un altro elemento, si verifica anche la fusione:
Questo è il motivo per cui una serie di elementi di paragrafo occupano pochissimo spazio, perché tutti i loro margini si fondono insieme, formando un piccolo margine.
All'inizio, la fusione dei margini può sembrare strana, ma in realtà ha un significato. Prendiamo ad esempio una pagina di testo tipica composta da più paragrafi. Lo spazio sopra il primo paragrafo è uguale al margine superiore del paragrafo. Senza fusione dei margini, il margine tra tutti i paragrafi successivi sarebbe la somma del margine superiore e inferiore adiacenti. Questo significa che lo spazio tra i paragrafi è il doppio della parte superiore della pagina. Se si verifica la fusione dei margini, il margine superiore e inferiore tra i paragrafi si fondono insieme, rendendo le distanze uniformi.
Nota:Solo i margini verticali dei riquadri bloccanti nel flusso di documento normale subiscono la fusione dei margini. I margini tra i riquadri inline, i riquadri flottanti o i elementi posizionati assolutamente non si fondono.
- Pagina precedente Margine esterno CSS
- Pagina successiva Panoramica della posizionamento CSS
