Il foglio di stile a cascata (CSS) fornisce centinaia di proprietà di styling per gli elementi HTML. Insieme agli stili di decorazione, fornisce anche proprietà per regolare le posizioni e il posizionamento degli elementi sulla pagina web. Queste proprietà includono "galleggiante","imbottitura","margine","posizione", e molti altri.

Questo post coprirà:

• Qual è la proprietà "imbottitura" in CSS?
• Come specificare la proprietà "imbottitura"?

Qual è la proprietà "imbottitura" in CSS?

IL "imbottitura"La proprietà descrive la distanza tra il contenuto di un elemento e il bordo. Più specificamente, questa proprietà aggiunge spazio all'interno dell'elemento, mentre "margine"La proprietà genera spazio attorno all'elemento. I valori della proprietà di imbottitura possono essere misurati in "Px","Em","REM", o più. Comunque, il "REM"È l'unità migliore da utilizzare con le proprietà del margine e dell'imbottitura.

Prerequisito: crea un file HTML

Per applicare la proprietà di imbottitura sugli elementi HTML, gli utenti devono creare il file HTML. A tale scopo, utilizzare i seguenti passaggi:

• Aggiungere un ""Elemento e assegnarlo una classe"contenuto principale".
• Quindi, includi il ""Tag per posizionare un'immagine e"

  "Tag per includere un po 'di testo:

La luce dell'educazione ci rende luminosi.

Andiamo avanti verso la sezione CSS per applicare lo stile al contenitore.

Elemento "div" stile

Innanzitutto, accedi all'elemento "" con classe ".contenuto principale"E applica le seguenti proprietà:

.contenuto principale
larghezza: 400px;
Margine: auto;
Bordo: 5px scanalatura RGB (151, 151, 151);

La descrizione delle proprietà sopra menzionate è la seguente:

• "larghezza"Determina la larghezza dell'elemento.
• "margine"Definisce lo spazio attorno all'elemento.
• "confine"Applica il bordo attorno all'elemento specificando i valori per la larghezza, lo stile e il colore del bordo.

L'output del codice sopra fornito è rappresentato di seguito:

Come specificare la proprietà "imbottitura"?

In CSS "imbottitura"La proprietà ha un intervallo da uno a quattro valori. Per una migliore comprensione, segui gli esempi elencati:

• Esempio 1: proprietà CSS "imbottitura" con un valore
• Esempio 2: proprietà "imbottitura" CSS con due valori
• Esempio 3: proprietà "imbottitura" CSS con tre valori
• Esempio 4: proprietà "imbottitura" CSS con quattro valori

Esempio 1: proprietà CSS "imbottitura" con un valore

In CSS, quando il "imbottitura"Alla proprietà viene assegnato un valore, aggiunge"1rem"Spazio su ciascun lato del contenuto dell'elemento:

imbottitura: 1rem;

Produzione

Esempio 2: proprietà "imbottitura" CSS con due valori

IL "imbottitura"La proprietà può essere regolata con due valori, dove:

• IL "primo valore"Rappresenta l'imbottitura (spazio) ai lati superiore e inferiore.
• IL "Secondo valore"Rappresenta lo spazio ai lati sinistro e destro del contenuto dell'elemento:

imbottitura: 1rem 2rem;

Produzione

Esempio 3: proprietà "imbottitura" CSS con tre valori

Il CSS "imbottitura"La proprietà può essere regolata con i tre valori. Funzionano come segue:

• Il primo valore indica l'imbottitura in alto.
• Il secondo valore significa imbottitura ai lati sinistro e destro.
• Il terzo valore definisce l'imbottitura nella parte inferiore del contenuto dell'elemento:

imbottitura: 1rem 2rem 3rem;

Produzione

Esempio 4: proprietà "imbottitura" CSS con quattro valori

IL "imbottitura"La proprietà con quattro valori regola lo spazio specificato tra il contenuto e il bordo da tutti i lati come descritto di seguito:

• "Primo valore"Aggiunge l'imbottitura in alto.
• "Secondo valore"Aggiunge l'imbottitura sul lato destro.
• "Terzo valore"Aggiunge imbottitura in fondo.
• "Quarto valore"Aggiunge l'imbottitura sul lato sinistro:

imbottitura: 2rem 3rem 1rem 2rem;

Produzione

Abbiamo elaborato su stili di imbottitura HTML con valori diversi usando CSS.

Conclusione

Il CSS "imbottitura"La proprietà aumenta la distanza attorno al contenuto dell'elemento. Ha un intervallo di valori da uno a quattro. "Un valore"Significa la stessa imbottitura su ciascun lato del contenuto dell'elemento. "Due valori"Definisci lo spazio ai lati di alto livello e a sinistra destra. "Tre valori"Imposta imbottitura nella parte superiore, sinistra-destra e lati inferiori del contenuto dell'elemento. "Quattro valori"Specificare l'imbottitura unica su ciascun lato. Questo post ha dimostrato lo stile di imbottitura HTML in CSS.