Quando e perché il margine automatico non funziona in CSS
In questo post, spiegheremo quando e perché il margine automatico non funziona in CSS.
Cos'è la proprietà del margine?
CSS "margine"La proprietà viene utilizzata per creare spazio libero attorno all'elemento, che potrebbe essere da sinistra, destra, in alto e in basso. Lo spazio definito si svolge sempre al di fuori dell'elemento HTML selezionato.
Sintassi
Margine: lunghezza | auto;Il valore "lunghezza"Si riferisce al margine di elementi, che può essere specificato in REM, PT, PX e in altre unità. Valore "auto"Consente al browser di regolare il margine.
Per scoprire profondamente la proprietà del margine, puoi controllare questo articolo dedicato.
Quando e perché il margine automatico non funziona in CSS?
Ogni elemento HTML ha un tipo di visualizzazione per impostazione predefinita, uno è "bloccare", E l'altro è"in linea". In HTML, alcuni sono elementi a livello di blocco e alcuni sono elementi in linea per impostazione predefinita. Gli elementi a livello di blocco hanno una larghezza predefinita del 100%, mentre gli elementi in linea non hanno larghezza o imbottitura predefinita.
Elemento HTML del tipo di blocco
Qui nel nostro file HTML, due " <> Blocco
Bloccare
Il valore di visualizzazione come blocco verrà applicato per impostazione predefinita
elemento e consumerà la larghezza del 100% come mostrato di seguito:
Ora aggiungiamo il "margine"Proprietà con"auto"Valore al nostro elemento tipo blocco
lungo il "larghezza" Di "50px":
Plarghezza: 50px;
Margine: auto;
Dopo aver salvato il codice menzionato, si noti che la larghezza predefinita è stata sovrascritta con 50px e il margine automatico ha regolato l'elemento al centro:
Andiamo avanti verso gli elementi HTML di tipo in linea.
Elemento HTML di tipo inline
Mentre l'immagine seguente mostra che quando abbiamo dichiarato un po 'di testo all'interno dei tag, non hanno consumato spazio; È solo perché il valore di visualizzazione in linea è stato applicato per impostazione predefinita su questo elemento:
Ora, se applicheremo la proprietà di larghezza o margine con valore automatico sull'elemento span. Di conseguenza, non si verificheranno effetti. Perché quando viene applicato il display in linea, rende l'elemento limitato a consumare solo lo spazio che esiste all'interno dei suoi tag.
Suggerimento bonus
Se la proprietà di visualizzazione per un elemento è impostata su inline per impostazione predefinita, è possibile sovrascriverla specificando il blocco di valore della proprietà di visualizzazione da solo.
Dai un'occhiata sotto l'esempio spiegato.
Esempio
Usiamo intenzionalmente un elemento con valore inline predefinito, come:
> Inline
Nel passaggio successivo, utilizzare la proprietà del display lungo il valore "bloccare". Imposta la larghezza su 50px e il margine su Auto come spiegato:
spanblocco di visualizzazione;
larghezza: 50px;
Margine: auto;
Produzione
Abbiamo elaborato quando e perché il margine automatico non funziona in CSS.
Conclusione
Il margine automatico non funziona con elementi che hanno un display in linea per impostazione predefinita, come Span. Solo gli elementi con il blocco di visualizzazione predefinito funzionano con margine automatico. Tuttavia, puoi prevalere sul comportamento in linea di un elemento e farlo comportarlo come un elemento di tipo a blocchi. Questo articolo ha discusso del perché e quando il margine automatico non funziona all'interno di CSS.