TechCodeview

Als we opvulling in het HTML-document willen toevoegen met behulp van de Internal CSS, moeten we de onderstaande stappen volgen. Met behulp van deze eenvoudige stappen kunnen we eenvoudig de opvulling toevoegen.

Stap 1: Ten eerste moeten we de HTML-code in een willekeurige teksteditor typen of het bestaande HTML-bestand openen in de teksteditor waarin we de opvulling willen toevoegen.

 Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding. 

Stap 2: Nu moeten we de cursor in de head-tag plaatsen net na de title-tag van het HTML-document en vervolgens de tag zoals weergegeven in het volgende blok.

 Add the Padding in Html 

Stap 3: Nu moeten we de eigenschap van opvulling definiëren in die id-selector die is opgegeven net vóór de tekst waaraan we opvulling willen toevoegen.

Hieronder volgen de vijf verschillende eigenschappen waarmee we de opvulling aan elke kant kunnen toepassen:

i. Vulling-links:

Als we alleen linkeropvulling op een element willen toepassen, moeten we alleen gebruiken opvulling-links eigenschap in de ID-kiezer. En dan hoeven we slechts één waarde voor de eigenschap in te stellen, zoals weergegeven in het volgende voorbeeld:

 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. 

De uitvoer van bovenstaande code die de eigenschap padding-left gebruikt, wordt weergegeven in de volgende schermafbeelding:

ii. Vulling-rechts:

Als we alleen de juiste opvulling op een element willen toepassen, moeten we alleen gebruiken opvulling-rechts eigenschap in de ID-kiezer. En dan hoeven we slechts één waarde voor de eigenschap in te stellen, zoals weergegeven in het volgende voorbeeld:

 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. 

De uitvoer van bovenstaande code die de eigenschap Padding-right gebruikt, wordt weergegeven in de volgende schermafbeelding:

iii. Gevoerde bovenkant:

Als we alleen topvulling op een element willen toepassen, moeten we alleen gebruiken opvulling-top eigenschap in de ID-kiezer. En dan hoeven we slechts één waarde voor de eigenschap in te stellen, zoals weergegeven in het volgende voorbeeld:

 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. 

De uitvoer van bovenstaande code die de eigenschap padding-top gebruikt, wordt weergegeven in de volgende schermafbeelding:

iv. Gewatteerde onderkant:

Als we alleen onderste opvulling op een element willen toepassen, moeten we alleen gebruiken opvulling-bodem eigenschap in de ID-kiezer. En dan hoeven we slechts één waarde voor de eigenschap in te stellen, zoals weergegeven in het volgende voorbeeld:

 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. 

De uitvoer van bovenstaande code die de eigenschap padding-bottom gebruikt, wordt weergegeven in de volgende schermafbeelding:

v. Opvulling:

Als we de verschillende opvulling op alle vier de zijden (boven, onder, links, rechts) willen toepassen, moeten we de vier waarden opgeven in de opvullingseigenschap.

 padding: 10px 50px 75px 200px; 

Als we de twee waarden specificeren, past de HTML-editor de eerste opvulling toe op de boven- en onderkant en de tweede opvulling op de linker- en rechterzijde.

 padding: 100px 50px; 

Als we alleen een waarde opgeven in het opvullingsattribuut, past de HTML-editor dezelfde opvulling toe op alle vier de zijden.

string.substring java

 padding: 100px; 

Voorbeelden van opvuleigenschappen:

Voorbeeld 1: In het volgende voorbeeld wordt één waarde in de eigenschap opvulling gebruikt om dezelfde opvulling op alle vier de zijden in te stellen.

 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. 

De uitvoer van voorbeeld 1 wordt getoond in de volgende schermafbeelding:

Voorbeeld 2: In het volgende voorbeeld worden twee waarden gebruikt in de opvulling eigenschap om dezelfde opvulling in te stellen op de tegenoverliggende zijden.

 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. 

De uitvoer van voorbeeld 2 wordt getoond in de volgende schermafbeelding:

Voorbeeld 3: In het volgende voorbeeld worden vier waarden in de eigenschap opvulling gebruikt om de verschillende opvulling op alle vier de zijden in te stellen.

 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. 

De uitvoer van voorbeeld 3 wordt getoond in de volgende schermafbeelding: