Opvulling is de ruimte tussen de inhoud en de gedefinieerde rand van een element. Opvulling betekent het toevoegen van ruimtes binnen het element, waardoor de interne ruimte wordt gecontroleerd en zo de afmetingen en het uiterlijk worden beïnvloed.
Inhoudsopgave
CSS-opvulling
De eigenschap CSS Padding wordt gebruikt om ruimte te creëren tussen de inhoud van het element en de rand van het element. Het heeft alleen invloed op de inhoud binnen het element.
CSS-opvulling is anders dan CSS-marge omdat de marge de ruimte is tussen aangrenzende elementranden en opvulling de ruimte tussen de inhoud en de rand van het element.
We kunnen de opvulling boven, onder, links en rechts onafhankelijk wijzigen met behulp van opvuleigenschappen. Eigenschappen van CSS-opvulling
hoe je string in int kunt veranderen
CSS biedt eigenschappen om de opvulling voor individuele zijden van een element te specificeren, die als volgt worden gedefinieerd:
- opvulling-top : Stelt de opvulling voor de bovenzijde van het element in.
- opvulling-rechts : Stelt de opvulling voor de rechterkant van het element in.
- opvulling-bodem : Stelt de opvulling voor de onderkant van het element in.
- opvulling-links : Stelt de opvulling voor de linkerkant van het element in.
Opvuleigenschappen kunnen de volgende opvulwaarden hebben:
- Lengte - in cm, px, pt, etc.
- Breedte-% breedte van het element.
- overerven - opvulling overnemen van het bovenliggende element
Syntaxis:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Voorbeeld: Om het gebruik van de eigenschap opvulling te demonstreren, waarbij we opvulling afzonderlijk op elke zijde van de div toepassen.
array.sort in JavaHTML
Opvulling Voorbeeldtitel><style>lichaam {marge: 0; opvulling: 20px; breedte: 50%; } h2 { kleur: groen; } .myDiv { achtergrondkleur: lichtblauw; rand: 2px effen zwart; /* Opvulling aan elke zijde afzonderlijk aanbrengen */ opvulling-top: 80px; opvulling rechts: 100px; opvulling-bodem: 50px; opvulling links: 80px; } .inner { achtergrondkleur: roze; rand: 2px effen zwart; breedte: 70px; hoogte: 50px; weergave: flex; items uitlijnen: centreren; rechtvaardigen-inhoud: centrum; } stijl> hoofd> <body> <div> <div>Pad_Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="CSS-opvulling"><p>CSS-opvulling</p> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Afkortingseigenschap voor opvulling in CSS</strong> </b> </h2><p dir='ltr'><span>Met de Shorthand Padding-eigenschap in CSS kunt u de opvulling aan alle zijden (boven, rechts, onder, links) van een element op een enkele regel instellen met enkele combinaties, zodat we eenvoudig opvulling kunnen toepassen op ons beoogde element.</span></p> <p dir='ltr'> <b> <strong>Er zijn vier gevallen waarin gebruik wordt gemaakt van steno-eigenschappen:</strong> </b> </p> <ol><li value='1'><span>Als de eigenschap opvulling één waarde heeft.</span></li><li value='2'><span>Als de eigenschap opvulling twee waarden bevat.</span></li><li value='3'><span>Als de eigenschap opvulling drie waarden bevat.</span></li><li value='4'><span>Als de eigenschap opvulling vier waarden bevat.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Korte opvuleigenschap voor O</span> <b> <strong>ne Waarde</strong> </b> </h3><p dir='ltr'><span>Als de eigenschap opvulling één waarde heeft, wordt opvulling toegepast op alle zijden van een element. Bijvoorbeeld opvulling: 20px past 20 pixels opvulling gelijkmatig toe op alle zijden.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/shweta-tiwari">shweta tiwari-acteur</a>
</blockquote> <h3 id='syntax-1'> <b> <strong>Syntaxis:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>Om de toepassing van 20px-opvulling op alle zijden van div te demonstreren.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Opvuleigenschap heeft één waardetitel><style>lichaam {marge: 0; opvulling: 20px; } h2 { kleur: groen; } .myDiv {achtergrondkleur: grijs; rand: 2px effen zwart; tekst uitlijnen: centreren; breedte: 40%; /* Past 10px opvulling toe op alle zijden */ opvulling: 20px; } .inner {hoogte: 70px; breedte: 70px; achtergrondkleur: roze; weergave: flex; items uitlijnen: centreren; rechtvaardigen-inhoud: centrum; } stijl> hoofd> <body> <div> <div>Paddingdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS-opvulling"><p>CSS-opvullingseigenschap met één waarde.</p> <h2 id='padding-property-for-two-values'><span>Opvuleigenschap voor T</span> <b> <strong>w Waarden</strong> </b> </h2><p dir='ltr'><span>Als de eigenschap opvulling twee waarden bevat, is de eerste waarde van toepassing op de bovenste en onderste opvulling, en de tweede waarde op de rechter en linker opvulling. Bijvoorbeeld: opvulling: 10px 20px, d.w.z. de bovenste en onderste opvulling zijn 10px, terwijl de opvulling rechts en links 20px is.</span></p> <h3 id='syntax-2'> <b> <strong>Syntaxis:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 10px padding to top and bottom, 20px padding to right and left */ padding: 10px 20px; }></pre><p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>Om het gebruik van een opvullingseigenschap met twee waarden te demonstreren.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Opvuleigenschap bevat twee waardentitel><style>lichaam {marge: 0; opvulling: 20px; } h2 { kleur: groen; } .myDiv { achtergrondkleur: grijs; rand: 2px effen zwart; tekst uitlijnen: centreren; breedte: 40%; opvulling: 10px 20px; /* Past 10px opvulling toe op de boven- en onderkant, 20px opvulling op rechts en links */ } .inner { height: 70px; breedte: 70px; achtergrondkleur: roze; } stijl> hoofd> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="css-opvulling"><p>CSS-opvulling</p> <h3 id='padding-property-for-three-values'><span>Opvuleigenschap voor</span> <b> <strong>Drie waarden</strong> </b> </h3><p dir='ltr'><span>Als de eigenschap opvulling drie waarden bevat, stelt de eerste waarde de bovenste opvulling in, de tweede waarde stelt de rechter en linker opvulling in, en de derde waarde stelt de onderste opvulling in.</span></p> <p dir='ltr'><span>Bijvoorbeeld – opvulling: 10px 20px 30px;</span></p> <ul><li value='1'><span>bovenste opvulling is 10px</span></li><li value='2'><span>de rechter en linker opvulling is 20px</span></li><li value='3'><span>onderste vulling is 30px</span></li></ul><h3 id='syntax-3'> <b> <strong>Syntaxis:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 10px padding to top, 20px padding to right and left, 30px padding to bottom */ padding: 10px 20px 30px; }></pre><p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>In dit voorbeeld gebruiken we opvulling met drie waarden.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/an-array-strings-c">c programmareeksarray</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Opvuleigenschap bevat drie waardentitle><style>lichaam {marge: 0; opvulling: 20px; } h2 { kleur: groen; } .myDiv { achtergrondkleur: geelgroen; rand: 2px effen zwart; tekst uitlijnen: centreren; breedte: 40%; opvulling: 10px 20px 30px; /* Past 10px opvulling toe op de bovenkant, 20px opvulling op rechts en links, 30px opvulling op de onderkant */ } .inner { height: 70px; breedte: 70px; achtergrondkleur: grijs; } stijl> hoofd> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="CSS-opvulling"><p>CSS-opvulling</p> <p dir='ltr'> <br></p> <h2 id='padding-property-having-four-values'> <b> <strong>Opvuleigenschap met vier waarden</strong> </b> </h2><p dir='ltr'><span>Als de eigenschap opvulling vier waarden bevat, stelt de eerste waarde de bovenste opvulling in, de tweede waarde stelt de rechter opvulling in, de derde waarde stelt de onderste opvulling in en de vierde waarde stelt de linker opvulling in.:</span></p> <p dir='ltr'><span>Bijvoorbeeld – opvulling: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>bovenste opvulling is 10px</span></li><li value='2'><span>rechter opvulling is 5px</span></li><li value='3'><span>onderste vulling is 15px</span></li><li value='4'><span>linkervulling is 20px</span></li></ul><h3 id='syntax-4'> <b> <strong>Syntaxis:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 10px padding to top, 20px padding to right, 15px padding to bottom, and 25px padding to left */ padding: 10px 20px 15px 25px; }></pre><p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>Om het gebruik van een opvullingseigenschap met vier waarden te demonstreren.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/mysql-unique-key">unieke mysql-sleutel</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Opvuleigenschap bevat vier waardentitle><style>lichaam {marge: 0; opvulling: 20px; } h2 { kleur: groen; } .myDiv { achtergrondkleur: cyaan; rand: 2px effen zwart; tekst uitlijnen: centreren; breedte: 40%; opvulling: 10px 20px 15px 25px; /* Past 10px opvulling toe op de bovenkant, 20px opvulling op de rechterkant, 15px opvulling op de onderkant en 25px opvulling op de linkerkant */ } .inner { height: 70px; breedte: 70px; achtergrondkleur: zwart; kleur wit; weergave: flex; items uitlijnen: centreren; rechtvaardigen-inhoud: centrum; } stijl> hoofd> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="CSS-opvulling"><p>CSS-opvulling</p> <h2 id='all-css-padding-properties'><span>Alle CSS-opvuleigenschappen</span></h2><p dir='ltr'><span>Door individuele zij-eigenschappen en steno-eigenschappen te combineren, zijn er in totaal 5 eigenschappen van CSS-opvulling:</span></p> <table class="table"><tbody><tr><th><span>Eigendom</span></th><th><span>Beschrijving</span></th></tr></tbody><tbody><tr><td> <b> <strong>opvulling</strong> </b> </td><td><span>verkorte eigenschap voor het instellen van alle opvuleigenschappen in één declaratie</span></td></tr><tr><td> <b> <strong>opvulling-bodem</strong> </b> </td><td><span>Stelt de onderste opvulling van een element in</span></td></tr><tr><td> <b> <strong>opvulling-links</strong> </b> </td><td><span>Stelt de linkeropvulling van een element in</span></td></tr><tr><td> <b> <strong>opvulling-rechts</strong> </b> </td><td><span>Stelt de juiste opvulling van een element in</span></td></tr><tr><td> <b> <strong>opvulling-top</strong> </b> </td><td><span>Stelt de bovenste opvulling van een element in</span></td></tr></tbody></table> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-built-functions/">Ingebouwde Python-Functies</a> </li><li> <a href="/c-pointers/">C-Wijzers</a> </li><li> <a href="/java-object-class/">Java-Objectklasse</a> </li><li> <a href="/powershell-tutorial/">Powershell-Zelfstudie</a> </li><li> <a href="/processes-threads/">Processen En Discussies</a> </li><li> <a href="/factors/">Factoren-Van</a> </li><li> <a href="/java-priority-queue/">Java-Prioriteit-Wachtrij</a> </li><li> <a href="/csharp-operators/">Csharp-Operators</a> </li><li> <a href="/operating-system/">Besturingssysteem</a> </li><li> <a href="/prime-number/">Priemgetal</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Java-predikaatinterface</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java 8 Predikaatinterface met voorbeelden en onderwerpen over functionele interface, anonieme klasse, lambda voor lijst, lambda voor vergelijkbaar, standaardmethoden, methodereferentie, Java-datum en -tijd, Java Nashorn, Java optioneel, stream, filter enz.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-predicate-interface"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/yaml-json-converter">YAML naar JSON-converter</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-create-tables-r">Hoe maak je tabellen in R?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-ethics">Verschil tussen ethiek en moraliteit</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-copy-constructor-example">Voorbeeld van Java Copy Constructor</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/tee-command-linux-with-examples">tee-opdracht in Linux met voorbeelden</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/how-enable-disable-developer-options-android">schakel de ontwikkelaarsmodus uit</a>
</li><li><a href="/images-markdown">afwaardering met afbeeldingen</a>
</li><li><a href="/latex-fonts-size-styles">latex-lettergrootte</a>
</li><li><a href="/factory-method-pattern">fabrieksmethode ontwerppatroon</a>
</li><li><a href="/npm-clear-cache">npm-cache leeg</a>
</li><li><a href="/third-normal-form">derde normaalvorm</a>
</li><li><a href="/what-is-username">gebruikersnaam</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Alle Rechten Voorbehouden | <a href="//pt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>