Come posso creare imbottitura in CSS?

L'imbottitura CSS consente a un programmatore HTML di impostare l'imbottitura predefinita o lo spazio morto al di fuori di un elemento HTML.Il vantaggio di farlo è che salva il programmatore dal ripetere quel codice di imbottitura per ogni istanza di quell'elemento e crea più facilmente coerenza sulla pagina.L'elemento HTML da imbottire può essere un numero qualsiasi di cose, come un paragrafo, una tabella o una voce.

Per creare imbottitura in CSS, dovrai prima identificare l'elemento HTML che si desidera imbottire.Questo elemento che vuoi pad è noto come selettore.Quindi, vorrai specificare i valori di imbottitura appropriati.Esistono cinque diversi tipi di proprietà di imbottitura in CSS Mdash;uno per tutti e quattro i lati di un elemento contemporaneamente e altri quattro per ogni singolo lato dell'elemento (ad esempio, il lato sinistro, il lato destro, il lato superiore o il lato inferiore).Una proprietà che consente al programmatore di specificare i valori per tutti e quattro i lati di un elemento HTML contemporaneamente è chiamata proprietà stenografia .

Il linguaggio di codifica utilizzato per specificare una dichiarazione di imbottitura CSS è semplicemente la parola "imbottitura".A seguito di tale etichetta, sono i valori rilevanti dell'imbottitura o informazioni sulla quantità di spazio desiderata, generalmente rappresentate da pixel o una percentuale.L'imbottitura e i valori sono scritti all'interno di parentesi graffe o ricci (cioè {e}).Precedente tutto ciò è l'elemento HTML da imbottire (ad esempio, P per il paragrafo o H2 per le intestazioni di livello 2).

In termini di come è rappresentato il valore, i valori possono essere rappresentati in pixel (ad es. 1px o 5px), punti (ad es. 1pt o 5pt) o pollici (ad es. 1in o 5in) o centimetri (ad esempio, 1 cm o 5 cm).I valori possono anche essere dichiarati come percentuale dell'elemento HTML in stile.Se il valore è del 50%, ad esempio, l'imbottitura sarà uguale alla metà della dimensione dell'elemento.

I seguenti esempi, sono il codice HTML per l'imbottitura di un elemento HTML mediante valori riflessi in una percentuale e lunghezza, rispettivamente.Se viene assegnato un solo valore, i browser Web assegnano questa imbottitura a tutti e quattro i lati dell'elemento HTML.

imbottitura: 10%;
imbottitura: 100px;

L'aggiunta di più valori al tipo di dichiarazione di imbottitura di cui sopra farà sì che i browser Web li interpretino in un certo modo.Se vengono assegnati due valori, il primo corrisponderà alla parte superiore e inferiore, mentre il secondo corrisponde a sinistra e a destra.Tre valori faranno riferire il primo alla parte superiore, il secondo ai lati sinistro e destro e il terzo alla parte inferiore dell'elemento HTML.L'assegnazione del massimo di quattro valori provoca il primo, il secondo, il terzo e il quarto valori corrispondenti alla parte superiore, destra, in basso e a sinistra dell'elemento HTML, in quell'ordine.Quando viene fornito più di un valore, dovrebbero essere separati dagli spazi e terminati con un semi-colon, ad esempio:

Implementazione: 10px 20px 10px 20px;

L'imbottitura in CSS può essere eseguita anche a un lato alla volta.A questo proposito, sono disponibili altre quattro proprietà di imbottitura.Si tratta di imbottitura, imbottitura a destra, imbottitura e imbottitura-sinistra.Per creare imbottitura in CSS in questo modo più preciso, dovrai etichettare le proprietà con la stessa sintassi delle dichiarazioni stensa come sopra.Ognuna di queste proprietà di imbottitura assume solo un valore di lunghezza o percentuale.Ad esempio:

Pagging-top: 10px;
imbottitura-destra: 20px;
imbottitura-bottom: 10px;
imbottitura-sinistra: 20px;

Il seguente codice crea una pagina web, dichiara le proprietà di imbottitura tra i tag di stile eQuindi li usa in un elemento di paragrafo specificato dal tag P.Il testo tra/ * e le note */sono note per spiegare il tipo di imbottitura impiegata e non verrebbe incluso nel codice di imbottitura CSS.

lt; html gt;
lt; head gt;
lt; stile stile ' testo/css gt;
p.example1 {imbottitura: 10px;} /* imbottitura corta per tutti e quattro i lati* /
p.example2 {imbottitura: 50px 30px;} /* imbottitura corta per la parte superiore e inferiore seguita da sinistrae a destra * /
p.example3 {
padding-top: 10px;
imbottitura-bottom: 20px;
imbottitura-bottom: 10px;
imbottitura-sinistra: 20px;
} / * Implementazione individuale.*/
lt;/style gt;
lt;/head gt;

lt; body gt;
lt; p class ' Esempio1 gt; questo testo ha la stessa imbottitura su ciascun lato.L'imbottitura su ciascun lato è 10px. Lt;/p gt;
lt; p class ' Esempio2 gt; questo testo ha un'imbottitura superiore e inferiore di 50px e un'imbottitura sinistra e destra di 30px. Lt;/p gt;
lt; p di classe p di classe P di classe' "Esempio3" gt; questo testo ha una imbottitura superiore di 10px, un'imbottitura destra di 20px, una imbottitura inferiore di 10px e un'imbottitura sinistra di 20px. Lt;/p gt;
lt;/body gt;
lt;/html gt;

Nell'esempio sopra, "Esempio1", ecc., Sono nomi assegnati a una classe, che vengono quindi referenziati nei paragrafi.Il periodo tra il tag P e i nomi della classe all'inizio del codice indica una dichiarazione di una classe assegnata a un paragrafo.Notare le parentesi graffe dopo la dichiarazione di classe che racchiude le assegnazioni del valore della proprietà di imbottitura.

Sebbene ciò possa sembrare molto lavoro, è molto meno laborioso che specificare l'imbottitura per ogni singolo paragrafo.È possibile dichiarare una proprietà di imbottitura per l'elemento desiderato, che nell'esempio sopra è il tag P, quindi fare riferimento alla classe quando si utilizza l'elemento tra i tag del corpo della pagina.Se è necessario solo un tipo di imbottitura per tutti i paragrafi, non è necessario utilizzare le lezioni.Basta utilizzare il seguente codice tra i tag di stile, quindi codificare i paragrafi senza specificare alcuna classe.Questo codice andrebbe tra i tag del corpo anziché il codice nell'esempio sopra.

P {imbottitura: 10px 20px 10px 20px;}

Questa imbottitura CSS che questo creerebbe avrebbe influire su tutti i paragrafi anche se non vi era alcuna classe specificata.