Výplň je priestor medzi obsahom a definovanou hranicou prvku. Výplň znamená pridávanie medzier vo vnútri prvku, ovládanie jeho vnútorného priestoru, čím sa ovplyvňuje jeho rozmery a vzhľad.
Obsah
CSS Padding
Vlastnosť CSS Padding sa používa na vytvorenie priestoru medzi obsahom prvku a okrajom prvku. Ovplyvňuje iba obsah vo vnútri prvku.
CSS padding sa líši od Okraj CSS keďže okraj je priestor medzi okrajmi susedných prvkov a padding je priestor medzi obsahom a okrajom prvku.
Pomocou vlastností výplne môžeme nezávisle meniť hornú, spodnú, ľavú a pravú výplň. Vlastnosti výplne CSS
rozdiel medzi binárnym stromom a binárnym vyhľadávacím stromom
CSS poskytuje vlastnosti na špecifikovanie výplne pre jednotlivé strany prvku, ktoré sú definované takto:
- vypchávka-top : Nastavuje výplň pre hornú stranu prvku.
- polstrovanie-vpravo : Nastaví výplň pre pravú stranu prvku.
- polstrovanie-dno : Nastavuje výplň pre spodnú stranu prvku.
- polstrovanie-vľavo : Nastaví výplň pre ľavú stranu prvku.
Vlastnosti výplne môžu mať nasledujúce hodnoty výplne:
- Dĺžka – v cm, px, pt atď.
- Šírka – % šírky prvku.
- zdediť- zdediť výplň z rodičovského prvku
Syntax:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Príklad: Na demonštráciu použitia vlastnosti padding, v ktorej aplikujeme padding na každú stranu div jednotlivo.
ako získať hru holub na androidHTML
Ukážkový názov výplne><style>telo { okraj: 0; výplň: 20px; šírka: 50 %; } h2 { farba: zelená; } .myDiv { farba pozadia: svetlomodrá; orámovanie: 2px plná čierna; /* Použitie paddingu na každú stranu jednotlivo */ padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; } .vnútorná { farba pozadia: ružová; orámovanie: 2px plná čierna; šírka: 70px; výška: 50px; displej: flex; align-items: center; zdôvodniť-obsah: stred; } štýl> hlava> <body> <div> <div>Pad_Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="CSS výplň"><p>CSS Padding</p> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Vlastnosť skratky pre výplň v CSS</strong> </b> </h2><p dir='ltr'><span>Vlastnosť Shorthand Padding v CSS vám umožňuje nastaviť výplň na všetkých stranách (horná, pravá, spodná, ľavá) prvku v jednom riadku s niektorými kombináciami, takže môžeme jednoducho použiť výplň na náš cieľový prvok.</span></p> <p dir='ltr'> <b> <strong>Pri používaní stenografického majetku existujú štyri prípady:</strong> </b> </p> <ol><li value='1'><span>Ak má vlastnosť padding jednu hodnotu.</span></li><li value='2'><span>Ak vlastnosť padding obsahuje dve hodnoty.</span></li><li value='3'><span>Ak vlastnosť padding obsahuje tri hodnoty.</span></li><li value='4'><span>Ak vlastnosť padding obsahuje štyri hodnoty.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Vlastnosť stenografického výplne pre O</span> <b> <strong>ne Hodnota</strong> </b> </h3><p dir='ltr'><span>Ak má vlastnosť padding jednu hodnotu, použije padding na všetky strany prvku. Napríklad výplň: 20px aplikuje 20 pixelov výplne na všetky strany rovnako.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/supervised-machine-learning">strojové učenie pod dohľadom</a>
</blockquote> <h3 id='syntax-1'> <b> <strong>Syntax:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>Príklad:</strong> </b> <span>Na ukážku použitia 20px výplne na všetky strany div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Vlastnosť výplne má jeden názov hodnoty><style>telo { okraj: 0; výplň: 20px; } h2 { farba: zelená; } .myDiv { farba pozadia: šedá; orámovanie: 2px plná čierna; text-align: center; šírka: 40 %; /* Použije 10px padding na všetky strany */ padding: 20px; } .vnutorne { vyska: 70px; šírka: 70px; farba pozadia: ružová; displej: flex; align-items: center; zdôvodniť-obsah: stred; } štýl> hlava> <body> <div> <div>Paddingdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS výplň"><p>Vlastnosť čalúnenia CSS s jednou hodnotou.</p> <h2 id='padding-property-for-two-values'><span>Vlastnosť výplne pre T</span> <b> <strong>wo hodnoty</strong> </b> </h2><p dir='ltr'><span>Ak vlastnosť padding obsahuje dve hodnoty, potom prvá hodnota platí pre hornú a dolnú výplň a druhá hodnota platí pre pravú a ľavú výplň. Napríklad – výplň: 10px 20px, t.j. horná a spodná výplň je 10px, zatiaľ čo pravá a ľavá výplň je 20px.</span></p> <h3 id='syntax-2'> <b> <strong>Syntax:</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>Príklad:</strong> </b> <span>Na demonštráciu použitia vlastnosti výplne s dvoma hodnotami.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Vlastnosť výplne obsahuje dva Valuetitle><style>telo { okraj: 0; výplň: 20px; } h2 { farba: zelená; } .myDiv { farba pozadia: šedá; orámovanie: 2px plná čierna; text-align: center; šírka: 40 %; výplň: 10px 20px; /* Použije 10px výplň hore a dole, 20px výplň vpravo a vľavo */ } .inner { height: 70px; šírka: 70px; farba pozadia: ružová; } štýl> hlava> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="css-padding"><p>CSS výplň</p> <h3 id='padding-property-for-three-values'><span>Vlastnosť výplne pre</span> <b> <strong>Tri hodnoty</strong> </b> </h3><p dir='ltr'><span>Ak vlastnosť padding obsahuje tri hodnoty, potom prvá hodnota nastavuje hornú výplň, druhá hodnota nastavuje pravú a ľavú výplň a tretia hodnota nastavuje spodnú výplň.</span></p> <p dir='ltr'><span>Napríklad – padding: 10px 20px 30px;</span></p> <ul><li value='1'><span>horná výplň je 10 pixelov</span></li><li value='2'><span>pravá a ľavá výplň je 20px</span></li><li value='3'><span>spodná výplň je 30 pixelov</span></li></ul><h3 id='syntax-3'> <b> <strong>Syntax:</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>Príklad:</strong> </b> <span>V tomto príklade používame výplň s tromi hodnotami.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string">reťazec v jazyku Java</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Vlastnosť výplne obsahuje tri hodnotytitle><style>telo { okraj: 0; výplň: 20px; } h2 { farba: zelená; } .myDiv { farba pozadia: žltozelená; orámovanie: 2px plná čierna; text-align: center; šírka: 40 %; padding: 10px 20px 30px; /* Použije 10px výplň hore, 20px výplň vpravo a vľavo, 30px výplň dole */ } .inner { height: 70px; šírka: 70px; farba pozadia: šedá; } štýl> hlava> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="CSS-výplň"><p>CSS výplň</p> <p dir='ltr'> <br></p> <h2 id='padding-property-having-four-values'> <b> <strong>Vlastnosť výplne so štyrmi hodnotami</strong> </b> </h2><p dir='ltr'><span>Ak vlastnosť padding obsahuje štyri hodnoty, potom prvá hodnota nastavuje hornú výplň, druhá hodnota nastavuje pravú výplň, tretia hodnota nastavuje spodnú výplň a štvrtá hodnota nastavuje ľavú výplň.:</span></p> <p dir='ltr'><span>Napríklad – padding: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>horná výplň je 10 pixelov</span></li><li value='2'><span>pravá výplň je 5px</span></li><li value='3'><span>spodná výplň je 15 pixelov</span></li><li value='4'><span>ľavé odsadenie je 20px</span></li></ul><h3 id='syntax-4'> <b> <strong>Syntax:</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>Príklad:</strong> </b> <span>Na demonštráciu použitia vlastnosti výplne so štyrmi hodnotami.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-regex">v regexe java</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Vlastnosť výplne obsahuje štyri hodnotytitle><style>telo { okraj: 0; výplň: 20px; } h2 { farba: zelená; } .myDiv { farba pozadia: azurová; orámovanie: 2px plná čierna; text-align: center; šírka: 40 %; padding: 10px 20px 15px 25px; /* Použije 10px výplň nahor, 20px výplň vpravo, 15px výplň dole a 25px výplň vľavo */ } .inner { height: 70px; šírka: 70px; farba pozadia: čierna; farba: biela; displej: flex; align-items: center; zdôvodniť-obsah: stred; } štýl> hlava> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="CSS-výplň"><p>CSS výplň</p> <h2 id='all-css-padding-properties'><span>Všetky vlastnosti výplne CSS</span></h2><p dir='ltr'><span>Kombináciou individuálnych vlastností strán a vlastností skratiek existuje 5 celkových vlastností výplne CSS:</span></p> <table class="table"><tbody><tr><th><span>Nehnuteľnosť</span></th><th><span>Popis</span></th></tr></tbody><tbody><tr><td> <b> <strong>vypchávka</strong> </b> </td><td><span>skrátená vlastnosť na nastavenie všetkých vlastností výplne v jednej deklarácii</span></td></tr><tr><td> <b> <strong>polstrovanie-dno</strong> </b> </td><td><span>Nastavuje spodnú výplň prvku</span></td></tr><tr><td> <b> <strong>polstrovanie-vľavo</strong> </b> </td><td><span>Nastavuje ľavú výplň prvku</span></td></tr><tr><td> <b> <strong>polstrovanie-vpravo</strong> </b> </td><td><span>Nastavuje správnu výplň prvku</span></td></tr><tr><td> <b> <strong>vypchávka-top</strong> </b> </td><td><span>Nastavuje hornú výplň prvku</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="">Kategórie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/quotes/">Citácie</a> </li><li> <a href="/operating-system/">Operačný Systém</a> </li><li> <a href="/cpp-iterator/">Cpp-Iterátor</a> </li><li> <a href="/python-basic-programs/">Základné Programy Python</a> </li><li> <a href="/chemistry-difference-between/">Chémia-Rozdiel-Medzi</a> </li><li> <a href="/ai-ml-ds-with-r/">Ai-Ml-Ds S R</a> </li><li> <a href="/information-security/">Informačná Bezpečnosť</a> </li><li> <a href="/keyboard-shortcuts/">Klávesové Skratky</a> </li><li> <a href="/google-workspace/">Google Workspace</a> </li><li> <a href="/analysis-of-algorithms/">Analýza algoritmov</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">JavaScript Array splice() metóda</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Portál informatiky pre geekov. Obsahuje dobre napísané, dobre premyslené a dobre vysvetlené články o informatike a programovaní, kvízy a otázky z praxe/súťažného programovania/pohovoru o spoločnosti.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/javascript-array-splice-method"> <i class="fa fa-external-link"></i> Čítajte Viac</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zaujímavé Články</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/javafx-with-eclipse">JavaFX s Eclipse</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/product-management-qna/">Produktový Manažment Qna</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-eta">Aká je úplná forma ETA</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/best-living-environment-regents-review-guide-2023-1311406">Najlepšie životné prostredie Regents Review Guide 2023</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-split-string-c-c">Ako rozdeliť reťazec v C/C++, Pythone a Java?</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">Populárne Príspevky</h2>
<div class="content">
<ul class="list"> <li><a href="/prime-number-program-java">Java programovanie prvočísel</a>
</li><li><a href="/java-convert-int-string">ako previesť celé číslo na reťazec java</a>
</li><li><a href="/reduce-python">python znížiť</a>
</li><li><a href="/gamepigeon-android">ako získať hru holub na android</a>
</li><li><a href="/dfs-algorithm">dfs algoritmus</a>
</li><li><a href="/how-align-images-css">zarovnanie obrázkov v css</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 Všetky Práva Vyhradené | <a href="//lt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Odmietnutie Zodpovednosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nás</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Zásady Ochrany Osobných Údajov</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>
</body>
</html>