Come gestire la spaziatura e il riempimento nei progetti reattivi

Questa guida pratica illustrerà il metodo per gestire la spaziatura e il riempimento nei design responsive.

Come gestire la spaziatura e il riempimento nei responsive design?

Il riempimento e la spaziatura nei design reattivi possono essere gestiti utilizzando i CSS. Di seguito viene fornita una dimostrazione pratica della gestione della spaziatura e del riempimento.

Passaggio 1: crea una struttura HTML

Innanzitutto, crea una struttura HTML e del testo al suo interno utilizzando

E

tag:

< corpo >
< h2 > Imbottitura e spaziatura CSS reattive < / h2 >
< div > Questo elemento CSS ha un riempimento di 80 px e una spaziatura di 40 px. < / div >
< / corpo >

Passaggio 2: applica i CSS

---

---

Ora applichiamo i CSS su

etichetta. Innanzitutto, imposta ' imbottitura 'valore della proprietà a' 80px ” per creare lo spazio attorno all'elemento. Successivamente, imposta ' margine 'valore della proprietà a' 40px ” e crea spazio attorno agli elementi fuori dal confine. Infine, utilizzare il ' confine 'proprietà e specificare il bordo e il colore per creare un bordo:

div {
imbottitura : 80px ;
margine : 40px ;
confine : 1px solido verde ;
}

L'output precedente conferma che la spaziatura e il riempimento sono stati applicati.

Controlliamo se è responsivo o meno contraendo la finestra del browser:

Contraendo la finestra, il contenuto si è comportato in modo reattivo, il che conferma che il riempimento e la spaziatura applicati sono reattivi.

Conclusione

Per gestire la spaziatura e il riempimento nei design reattivi, esistono proprietà CSS. Per aggiungere il riempimento nel responsive design utilizzando il pulsante ' imbottitura ' proprietà. Allo stesso modo, la spaziatura può essere aggiunta nel responsive design utilizzando il comando ' margine ' proprietà. Questo articolo ha presentato agli utenti una soluzione per gestire la spaziatura e il riempimento nei progetti reattivi.