Se vogliamo aggiungere il riempimento nel documento Html utilizzando il CSS interno, dobbiamo seguire i passaggi indicati di seguito. Utilizzando questi semplici passaggi, possiamo facilmente aggiungere l'imbottitura.
algoritmo di ricerca binaria
Passo 1: Per prima cosa dobbiamo digitare il codice Html in un qualsiasi editor di testo oppure aprire il file Html esistente nell'editor di testo in cui vogliamo aggiungere il riempimento.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
Passo 2: Ora dobbiamo posizionare il cursore nel tag head subito dopo il tag title del documento Html e quindi definire il file tag come mostrato nel blocco seguente.
Add the Padding in Html
Passaggio 3: Ora dobbiamo definire la proprietà di riempimento nel selettore id specificato subito prima del testo a cui vogliamo aggiungere il riempimento.
Di seguito sono riportate le cinque diverse proprietà da cui possiamo applicare l'imbottitura su ciascun lato:
io. Imbottitura a sinistra:
Se vogliamo applicare solo il riempimento sinistro a un elemento, allora dobbiamo usare only imbottitura-sinistra proprietà nel selettore id. E quindi dobbiamo impostare un solo valore per la proprietà, come mostrato nell'esempio seguente:
Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding. Provalo adesso L'output del codice precedente che utilizza la proprietà padding-left è mostrato nello screenshot seguente:
ii. Imbottitura a destra:
patrimonio netto di kat timpf
Se vogliamo applicare solo il riempimento destro a un elemento, allora dobbiamo usare only imbottitura a destra proprietà nel selettore id. E quindi dobbiamo impostare un solo valore per la proprietà, come mostrato nell'esempio seguente:
Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding. Provalo adesso L'output del codice precedente che utilizza la proprietà padding-right è mostrato nello screenshot seguente:
iii. Imbottitura superiore:
Se vogliamo applicare solo il riempimento superiore a un elemento, allora dobbiamo usare only parte superiore imbottita proprietà nel selettore id. E quindi dobbiamo impostare un solo valore per la proprietà, come mostrato nell'esempio seguente:
Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding. Provalo adesso L'output del codice precedente che utilizza la proprietà padding-top è mostrato nello screenshot seguente:
iv. Imbottitura inferiore:
Se vogliamo applicare solo il riempimento inferiore a un elemento, allora dobbiamo usare only fondo imbottito proprietà nel selettore id. E quindi dobbiamo impostare un solo valore per la proprietà, come mostrato nell'esempio seguente:
Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding. Provalo adesso L'output del codice precedente che utilizza la proprietà padding-bottom è mostrato nello screenshot seguente:
v. Imbottitura:
cambiare nome directory linux
Se vogliamo applicare il diverso riempimento a tutti e quattro i lati (alto, basso, sinistra, destra), allora dobbiamo specificare i quattro valori nella proprietà riempimento.
padding: 10px 50px 75px 200px;
Se specifichiamo i due valori, allora l'editor Html applica il primo riempimento in alto e in basso e il secondo riempimento a sinistra e destra.
elenca come array
padding: 100px 50px;
Se specifichiamo solo il valore nell'attributo riempimento, l'editor Html applicherà lo stesso riempimento a tutti e quattro i lati.
padding: 100px;
Esempi di proprietà di riempimento:
Esempio 1: L'esempio seguente utilizza un valore nella proprietà riempimento per impostare lo stesso riempimento su tutti e quattro i lati.
Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side. Provalo adesso L'output dell'esempio 1 è mostrato nella seguente schermata:
Esempio 2: L'esempio seguente utilizza due valori in imbottitura proprietà per impostare la stessa imbottitura sui lati opposti.
Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side. Provalo adesso L'output dell'esempio 2 è mostrato nella seguente schermata:
Esempio 3: L'esempio seguente utilizza quattro valori nella proprietà riempimento per impostare il riempimento diverso su tutti e quattro i lati.
Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side. Provalo adesso L'output dell'esempio 3 è mostrato nella seguente schermata:
