HTML5 - Opvulling

De opvulling in HTML kunnen we een spatie genereren tussen de inhoud en de randen van de doos die ze bevat, op deze manier kunnen we het element lucht geven en interessante grafische effecten bereiken.

• Vulling-top: Initialiseert de opvulling voor de bovenrand, de afmetingen worden uitgedrukt in lengte of in percentages.
• Padding-rechts: Initialiseert de opvulling voor de rechterrand, de afmetingen worden uitgedrukt in lengte of in percentages.
• Vulling-bodem: Initialiseert de opvulling voor de onderrand, de afmetingen worden uitgedrukt in lengte of in percentages.
• Vulling-links: Initialiseert de opvulling voor de linkerrand, de afmetingen worden uitgedrukt in lengte of in percentages.
• Vulling: Deze snelkoppeling helpt ons om de opvulling met al zijn randen op één regel te initialiseren.

Iets belangrijks dat we moeten beperken wanneer we de initialisatie van a . doen opvulling Bij het gebruik van percentagemetingen wordt dit percentage alleen bepaald op basis van de breedte van het element, nooit op de hoogte.
Laten we nu eens kijken met een eenvoudige code hoe u a . kunt toepassen opvulling in ons HTML5-document.

 Voorbeeld
Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.

Zoals we aan deze code kunnen zien, kunnen we heel interessante dingen benadrukken, als we goed kijken, hebben we al andere stijlen toegepast op het element waarop we opvullen en dat wil zeggen, we kunnen mixen met andere elementen om ons resultaat te verkrijgen, we kunnen zie ook dat we de meeteenheid gebruiken em in plaats van pxHoewel de twee compatibel zijn, is het een vraag of we hun veelzijdigheid kunnen zien; laten we eindelijk eens kijken hoe dit eruit ziet in onze browser:

Laten we nu eens kijken hoe we de snelkoppeling kunnen toepassen om onze opvulling in een enkele regel, hiervoor is de volgorde van de opvullingsmetingen als volgt: Omhoog, Rechts, Omlaag, Links; In aanvulling hierop, wanneer we waarden weglaten, wordt de andere waarde aangepast aan de niet-weggelaten waarde, bijvoorbeeld als we de linker weglaten, zal deze de waarde van de rechter aannemen, als we de lagere weglaten, zal deze de waarde aannemen van de bovenste, als we slechts één waarde plaatsen, zullen de vier zijden dezelfde waarde aannemen.
We gaan al deze theorie demonstreren met een praktijkcode, laten we eens kijken hoe we opvulling op een enkele regel op een heel eenvoudige manier kunnen implementeren.

 Voorbeeld
Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.

Zoals we kunnen zien, verandert de padding-declaratie niet veel en we besparen een paar regels, laten we eens kijken hoe het eruit zou zien in de browser:

In dit element maken we het met een nogal onregelmatige rand, als we de opvulling niet hadden toegepast, zou de rand de tekst hebben onderschept, breng de wijziging aan en controleer uw browser om het verschil te zien.
Hiermee voltooien we onze HTML5-opvulling-tutorial, we kunnen nu spaties maken binnen de elementen die onze inhoud in het HTML-document bevatten, en wat we nog hebben, is blijven oefenen totdat we onder de knie hebben wat we in deze tutorial hebben geleerd.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven