Valore di margine e capacità nei CSS

Il CSS di Magrin controlla il rientro degli elementi. Gli elementi in html sono rettangoli. Hanno bordi, margini e imbottiture.

L'area del margine è lo spazio al di fuori dei limiti dell'elemento. La proprietà viene utilizzata per impostare la distanza tra gli elementi e posizionarli sulla pagina.

trattini

La proprietà Margin in CSS può essere impostata su%, px, vh / vw, em e rem. Il valore del margine può essere ereditato dall'elemento padre (ereditato) o calcolato automaticamente dal browser (automatico). I valori per Margine in CSS possono essere spiegati in molti modi (gli esempi sono forniti in em - unità scalabili, a seconda della dimensione del carattere dell'elemento).

Modi per impostare i valori per i rientri:

• per ciascun lato (in alto, a destra, in basso, a sinistra) dell'elemento (ad esempio, viene specificato il valore del rientro esterno superiore dal bordo dell'elemento centrale);

 .center {margin-top: 1em;} 

• per i lati opposti (prima i valori per la parte superiore e inferiore, quindi per sinistra e destra);

 .center {margin: 1em, 0.5em;} 

• per tre lati (il valore per il margine superiore viene indicato per primo, il secondo per sinistra e destra, il terzo per il fondo);

 .center {margin: 0em 1.1em 2em;} 

• per ciascun lato, è possibile specificare i valori alternativamente (margine superiore, margine destro, ecc.) o in una riga dall'alto verso sinistra in senso orario;

 .center {margin: 0.5em 1em 1.5em 2em;} 

• il valore dell'elemento margin può essere lo stesso per ogni lato;

 .center {margin: 1em;} 

• il valore per il margine non può essere impostato;

• il valore del margine può essere negativo, ad esempio, in CSS, un margine superiore con un valore negativo sposta l'elemento verso l'alto;

 .center {margin-top: -1em;} 

• tutti i lati dell'elemento possono avere un valore di margine negativo, quindi "libera" lo spazio per i suoi elementi circostanti dal basso e da destra e "colpisce" gli elementi sinistro e superiore;

 .center {margin: -1em;} 

Trattino negativo

I rientri negativi vengono spesso usati per riposizionare un elemento. Quando si utilizza un margine negativo, l'elemento libera spazio per gli altri durante lo spostamento. Gli elementi con la proprietà applicata possono intersecare altri elementi o consentire ad altri elementi di "eseguirsi" da soli.

 .first {background-color: white;border: 0.06vw solid gold;box-shadow: 0 0 0.09vw gold;width: 50vw;padding: 2vw;margin-bottom: -1vw;margin-left: -9vw;}.second {background-color: black;color: white;font-size: 0.7rem;width: 10vw;padding: 0.5vw;margin-left: 27vw;} 

Con l'aiuto di margine negativo a sinistra e margine superiore è possibile "spostare" l'elemento a sinistra o in alto. Se ci sono già oggetti nel luogo in cui l'elemento viene spostato, si sovrappone a essi.

Il margine inferiore e il margine destro non influiscono sulla posizione dell'elemento a cui sono applicati, ma per gli altri oggetti diventa più piccolo. Grazie a ciò, nella foto, il blocco con il nome dell'autore della citazione "è salito" sul blocco con la citazione.

Auto ed eredita

L'uso dell'auto nei CSS per margine e testo allineati con il valore centrale ha un effetto simile. Centra automaticamente l'elemento orizzontalmente a una distanza uguale dai bordi del contenitore.

Prima di specificare il valore automatico, gli elementi sono disposti uno dopo l'altro senza rientri esterni (a meno che non venga specificato un altro valore di margine) nello stesso modo in cui sono disposti con un margine zero. Dopo aver specificato il valore centrale, si sposta al centro della riga.

 .center {margin: auto;} 

L'utilizzo del valore inherit implica l'ereditazione del valore dall'elemento padre. Supponiamo che un elemento genitore abbia un valore in CSS a sinistra, l'elemento centrale ha il valore specificato nell'esempio precedente.

 body {margin-top: 1em;}.center {margin: auto;} 

L'elemento genitore, in cui tutti gli altri elementi sono incorporati, si è spostato leggermente più in basso rispetto alla sua vecchia posizione. Se si modifica il valore del margine dell'elemento centrale su ereditato, il centramento sparirà come risultato e l'oggetto che eredita la proprietà si sposterà verso il basso nello stesso modo.

 body {margin-top: 1em;}.center {margin: inherit;} 

L'uso dei CSS nel corpo del margine può portare all'indentazione. In genere, il corpo imposta il margine su zero e il riempimento viene utilizzato, se necessario, per i rientri degli elementi.

Oggetti vicini

A causa del fatto che i trattini esterni non sono, di fatto, parte dell'elemento stesso, spesso non funzionano esattamente come si supponeva sotto l'influenza di altri oggetti. Un esempio di questo effetto è l'effetto del rientro.

Supponiamo che ci siano due elementi che si trovano uno sotto l'altro, hanno margini zero. Se aggiungi uno di questi margini, un margine diverso da zero, puoi vedere come uno si sposta rispetto al secondo elemento. Prescrittando un valore simile al secondo elemento, vediamo che in esso appaiono dei rientri esterni (si sposta a destra della sua vecchia posizione), ma la distanza tra di essi non aumenta, sebbene siano allineati lungo una linea orizzontale.

 .first {background-color: black;border: 0.1vw solid gold;margin: 3vw;width: 10vw;}.second {background-color: black;border: 0.1vw solid darkslateblue;margin: 3vw;width: 10vw;} 

Un effetto simile verrà osservato se imposti margini diversi per due elementi. Il valore del margine più grande vince, è questo valore che sarà uguale alla distanza tra gli elementi.

 .first {background-color: black;border: 0.1vw solid gold;margin: 3vw;width: 10vw;}.second {background-color: black;border: 0.1vw solid darkslateblue;margin: 5vw;width: 10vw;} 

Oggetti annidati

Il margine non funziona correttamente con elementi rientrati nidificati. Se il trattino superiore è prescritto per gli elementi padre e figlio, solo uno di essi funzionerà.

 .parent {width: 40vw;height: 20vh;background-color: rgba(214, 254, 255, 0.82);margin-top: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-top: 2vw;} 

L'immagine mostra esempi del comportamento degli elementi e quando i valori dei margini degli elementi padre e figlio sono diversi. Come puoi vedere, se il bambino ha un valore margin-top maggiore di quello del genitore, il genitore si sposta esattamente in base al valore specificato per il figlio.

 .parent {width: 25vw;height: 20vh;background-color: rgba(214, 254, 255, 0.82);margin-top: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-top: 4vw;} 

Un effetto simile è osservato nel comportamento dell'indentazione, quando l'altezza dell'elemento genitore principale è impostata sul rientro inferiore degli elementi genitore e figlio. Anche in questo caso viene preservata la priorità di un rientro più ampio.

 .parent {width: 25vw;height: auto;background-color: rgba(214, 254, 255, 0.82);margin-bottom: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-bottom: 4vw;} 

Articoli vuoti

Gli elementi vuoti comprimono i margini superiore e inferiore. E formalmente esisteranno, l'oggetto aumenterà, ma in effetti gli elementi adiacenti saranno influenzati da un solo valore.

 .first {background-color: black;width: 10vw;}.second_empty {width: 10vw;margin-top: 5vw;margin-bottom: 10vw;}.third {background-color: rgba(199, 90, 175, 0.76);width: 10vw;} 

Eccezioni e regole

In molti casi, l'aggiunta di proprietà aggiuntive all'elemento consente di eliminare l'aspetto di un collasso. La scomparsa dell'effetto collasso è dovuta al fatto che i trattini dei due elementi cessano di entrare completamente in contatto.

I problemi di compressione tra elementi padre e figlio possono essere evitati solo inserendo qualcosa tra loro, ad esempio aggiungendo un bordo ad un elemento figlio. Affinché il collasso non avvenga tra oggetti vicini, è meglio prescrivere il margine in una direzione.

Alcune regole comuni per l'utilizzo del margine:

• è meglio scrivere i rientri in una direzione per tutti gli elementi (destra e giù);
• la formazione della distanza tra gli elementi non dovrebbe avvenire a spese dei bambini;
• la rientranza del bambino all'interno del genitore dai confini del genitore è prescritta usando il padding del genitore e non il margine del bambino.

Margine in CSS è una delle proprietà di un elemento che ti consente di controllare la sua posizione sulla pagina in relazione ad altri oggetti. La proprietà ha quattro varianti che consentono di modificare la posizione dell'elemento orizzontalmente e verticalmente. Uno dei problemi nell'utilizzo del margine è il collasso dei rientri (combinando due rientri in uno solo).