HTML5 - Imbottitura

Il imbottitura in HTML ci permette di generare uno spazio tra il contenuto ei bordi della scatola che li contiene, in questo modo possiamo dare aria all'elemento e ottenere effetti grafici interessanti.

• Imbottitura: Inizializza l'imbottitura per il bordo superiore, le sue misure sono espresse in lunghezza o in percentuale.
• Imbottitura a destra: Inizializza l'imbottitura per il bordo destro, le sue misure sono espresse in lunghezza o in percentuale.
• Imbottitura-fondo: Inizializza l'imbottitura per il bordo inferiore, le sue misure sono espresse in lunghezza o in percentuale.
• Imbottitura sinistra: Inizializza il padding per il bordo sinistro, le sue misure sono espresse in lunghezza o in percentuale.
• Imbottitura: Questa scorciatoia ci aiuta a eseguire l'inizializzazione del padding con tutti i suoi bordi in un'unica riga.

Qualcosa di importante che dobbiamo limitare quando eseguiamo l'inizializzazione di a imbottitura L'uso di misurazioni percentuali è che questa percentuale verrà presa solo in base alla larghezza dell'elemento, mai all'altezza.
Vediamo ora con un semplice codice come applicare a imbottitura nel nostro documento HTML5.

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

Come possiamo vedere da questo codice possiamo evidenziare cose abbastanza interessanti, se guardiamo bene, abbiamo già applicato altri stili all'elemento a cui stiamo imbottendo e cioè possiamo mescolare con altri elementi per ottenere il nostro risultato, possiamo vedi anche che usiamo l'unità di misura em invece di pxSebbene i due siano compatibili, è una questione che possiamo vedere la loro versatilità; finalmente vediamo come appare nel nostro browser:

Ora vediamo come applicare la scorciatoia per inizializzare il nostro imbottitura in un'unica riga, per questo l'ordine delle misure di imbottitura è il seguente: Su, Destra, Giù, Sinistra; Oltre a questo quando omettiamo dei valori, l'altro valore viene adattato a quello non omesso, ad esempio se omettiamo il sinistro prenderà il valore del destro, se omettiamo quello inferiore prenderà il valore di quella superiore, se poniamo un solo valore, i quattro lati assumeranno lo stesso valore.
Dimostreremo tutta questa teoria con un codice di pratica, vediamo come implementiamo il padding in una singola riga in un modo molto semplice.

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

Come possiamo vedere, la dichiarazione di padding non cambia molto e salviamo alcune righe, diamo un'occhiata a come apparirebbe nel browser:

In questo elemento lo creiamo con un bordo piuttosto irregolare, se non avessimo applicato il padding il bordo avrebbe intercettato il testo, apporta la modifica e controlla nei tuoi browser per vedere la differenza.
Con questo finiamo il nostro tutorial sull'imbottitura HTML5, ora possiamo creare spazi all'interno degli elementi che contengono i nostri contenuti nel documento HTML, e ciò che ci resta è continuare a esercitarci fino a quando non avremo imparato ciò che abbiamo imparato in questo tutorial.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo