Modello di cornice: indentazione interna CSS

L'indentazione interna degli elementi si trova tra il bordo e l'area del contenuto. L'attributo più semplice per controllare questa area è l'attributo padding.

L'attributo padding CSS definisce l'area di spazio tra il bordo dell'elemento e il contenuto dell'elemento.

Proprietà padding di CSS

L'attributo padding CSS definisce lo spazio tra il bordo dell'elemento e il contenuto dell'elemento. L'attributo padding accetta valori di lunghezza o valori percentuali, ma non permette valori negativi.

Ad esempio, se desideri che tutti gli elementi h1 abbiano un margine interno di 10 pixel su tutti i lati, devi farlo così:

h1 {padding: 10px;}

Puoi anche impostare i margini interni superiori, destra, inferiore e sinistra in sequenza rispettivamente, e ciascun lato può utilizzare unità diverse o valori percentuali:

h1 {padding: 10px 0.25em 2ex 20%;}

Proprietà di margine interno singolo

Anche utilizzando i seguenti quattro attributi separati, impostare rispettivamente i margini interni superiori, destra, inferiore e sinistra:

Forse ti sarai reso conto, la seguente regola ha lo stesso effetto della regola abbreviata sopra:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Valori percentuali del margine interno

Come menzionato in precedenza, è possibile impostare valori percentuali per le proprietà di margine interno. I valori percentuali vengono calcolati rispetto alla larghezza dell'elemento genitore, come per i margini. Pertanto, se la larghezza dell'elemento genitore cambia,他们也会改变。

La seguente regola imposta il margine interno del paragrafo al 10% della larghezza dell'elemento genitore:

p {padding: 10%;}

Ad esempio: se l'elemento genitore di un paragrafo è un elemento div, allora il margine interno deve essere calcolato rispetto alla larghezza del div.

<div style="width: 200px;">
<p>Questo paragrafo è contenuto all'interno di un DIV che ha una larghezza di 200 pixel.</p>
</div>

Attenzione:I margini interni superiori e inferiori sono uguali ai margini interni sinistri e destri; ossia, il valore percentuale del margine interno superiore e inferiore viene impostato rispetto alla larghezza dell'elemento genitore, non rispetto all'altezza.

Esempio di margine interno CSS:

Tutte le proprietà di margine interno in una dichiarazione
Questo esempio dimostra come impostare tutte le proprietà di margine interno utilizzando l'attributo abbreviato in una dichiarazione, che può avere da uno a quattro valori.
Impostazione del margine interno inferiore 1
Questo esempio dimostra come impostare il margine interno inferiore della cella utilizzando il valore in centimetri.
Impostazione del margine interno inferiore 2
Questo esempio dimostra come impostare il margine interno inferiore della cella utilizzando il valore percentuale.
Impostazione del margine interno sinistro 1
Questo esempio dimostra come impostare il margine interno sinistro della cella utilizzando il valore in centimetri.
Impostazione del margine interno sinistro 2
Questo esempio dimostra come impostare il margine interno sinistro della cella utilizzando il valore percentuale.
Impostare il margine interno destro 1
Questo esempio dimostra come impostare il margine interno destro della cella utilizzando il valore in centimetri.
Impostare il margine interno destro 2
Questo esempio dimostra come impostare il margine interno destro della cella utilizzando il valore a percentuale.
Impostare il margine interno superiore 1
Questo esempio dimostra come impostare il margine interno superiore della cella utilizzando il valore in centimetri.
Impostare il margine interno superiore 2
Questo esempio dimostra come impostare il margine interno superiore della cella utilizzando il valore a percentuale.

Proprietà margine interno di CSS

Proprietà Descrizione
padding Proprietà abbreviate. Agiscono per impostare tutte le proprietà di margine interno dell'elemento in una dichiarazione.
padding-bottom Impostare il margine interno inferiore dell'elemento.
padding-left Impostare il margine interno sinistro dell'elemento.
padding-right Impostare il margine interno destro dell'elemento.
padding-top Impostare il margine interno superiore dell'elemento.