Lezione gratuita dal corso Web Development
Il pudding ci permette di impostare la distanza tra il contenuto dell'elemento e il bordo del blocco.
Quindi a me piace chiamarla imbottitura, quindi quando vogliamo in cicciottelli re un elemento, andiamo a utilizzare il padding perché il pudding è interno.
Anche il padding può essere impostato utilizzando l'unità di misura pixel oppure utilizzando la percentuale sempre rispetto alle dimensioni del suo contenitore.
Anche in questo caso valgono le le regole già dette per il bordo, quindi possiamo impostare singolarmente tutti e quattro i lati del pudding e possiamo utilizzare anche in questo caso le forme abbreviate.
Quindi impostare il pudding a coppie o con tre valori o con quattro valori per esprimerli tutti singolarmente.
Quindi prendiamo sempre i nostri quadrati, i nostri rettangoli.
Se volessimo andare a impostare ad esempio un padding a questo quadrato blu, che cosa dovremmo fare? Dovremmo scrivere padding cinquanta pixel? Questo vuol dire che stiamo andando ad aggiungere cinquanta pixel di imbottitura su tutti e quattro i lati, quindi sopra destra, sotto e sinistra.
Aggiorno una pagina e mi trovo proprio il quadrato molto piu' grande proprio perché c' è tutto questo padding tutto intorno.
Lo vediamo anche all'interno del nostro box model cliccando su square troviamo proprio il padding cinquanta pixel impostato dappertutto.
Ora si vede poco perché il quadrato è blu, però compare questa cornice interna che è proprio lo spazio dedicato al pudding, mentre il margine abbiamo visto che è esterno.
Se volessimo andare a impostare il padding in percentuale potremmo utilizzare la stessa sintassi.
Quindi al posto di padding cinquanta pixel potremmo scrivere padding ad esempio tre pixel e quindi il nostro quadrato si presenta così.
Quindi abbiamo sempre un padding che va a ingrandire la dimensione del mio quadrato.
La percentuale è una dimensione più fluida.
I pixel sono una dimensione fissa da questi esempi.
Abbiamo capito una cosa importante che le dimensioni del pudding si sommano alla larghezza e all'altezza del blocco.
Quindi che cosa significa? Che aumenta la dimensione finale del blocco? Quindi se io avevo impostato un'altezza e una larghezza secondo delle misure, aggiungendo il padding questa si somma alla dimensione finale.
Quindi che cosa succede? Come abbiamo visto, se il mio quadrato inizialmente era da trecento per trecento pixel, dando questo padding, in realtà la dimensione finale del mio quadrato è più grande.
Quindi se ad esempio diamo una misura in pixel così è più facile fare la somma venti pixel che cosa succede? Che il mio quadrato non è più trecento per trecento ma tre centoquaranta per trecento quaranta quindi sto aggiungendo venti pixel sopra, sotto a destra e a sinistra.
Quindi totale fa tre centoquaranta venti sopra venti sotto più venti a destra e venti a sinistra.
Quindi bisogna stare attenti quando si danno le dimensioni ai contenitori per un modo per sistemare questa questa problematica e quindi far sì che le dimensioni che noi diamo ad un contenitore tengano conto anche del padding interno.
Quindi utilizzando la proprietà boxing che cosa succede là? With the light determinano sì la dimensione del contenuto, però c' è la possibilità di considerare all'interno di white knight anche il pudding.
Quindi, anziché aggiungere il padding all'esterno, il padding rimane interno e in un certo senso rosicchia un pochettino lo spazio al contenuto, quindi il padding il bordo vengono sottratti o assorbiti da white night.
Quindi se io imposto la with ad esempio di duecento pixel il mio il mio contenitore, a prescindere da cosa ci sta dentro e da quanto padding avrà, sarà sempre largo duecento pixel.
Riprendendo il nostro esempio con i quadrati, questo quadrato che a Wind hit di trecento pixel, aggiungendo il padding diventi questo margine lo possiamo anche togliere aggiungendo il padding abbiamo visto che naturalmente il abbiamo visto che naturalmente il mio quadrato diventa largo trecento quaranta per tre centoquaranta perché il pudding si somma.
Se però vado ad aggiungere boxing border box aggiorno la pagina e il mio quadrato torna ad essere trecento per trecento e in questo caso il pudding è interno, quindi il contenuto non sarà più largo trecento, ma sarà largo due centosessanta, quindi il contenuto avrà meno spazio interno perché cioè dello spazio occupato dal pudding.
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.