Padding je prostor mezi obsahem a definovaným okrajem prvku. Vycpávka znamená přidání mezer uvnitř prvku, ovládání jeho vnitřního prostoru, čímž se ovlivní jeho rozměry a vzhled.
Obsah
CSS padding
Vlastnost CSS Padding se používá k vytvoření prostoru mezi obsahem prvku a okrajem prvku. Ovlivňuje pouze obsah uvnitř prvku.
CSS padding se liší od Okraj CSS protože okraj je prostor mezi sousedícími okraji prvku a padding je prostor mezi obsahem a okrajem prvku.
Pomocí vlastností odsazení můžeme nezávisle měnit horní, spodní, levé a pravé odsazení. Vlastnosti odsazení CSS
javac není rozpoznán
CSS poskytuje vlastnosti pro určení odsazení pro jednotlivé strany prvku, které jsou definovány takto:
- polstrování-top : Nastaví odsazení pro horní stranu prvku.
- vycpávka-vpravo : Nastaví odsazení pro pravou stranu prvku.
- vycpávka-dno : Nastaví výplň pro spodní stranu prvku.
- polstrování-vlevo : Nastaví odsazení pro levou stranu prvku.
Vlastnosti odsazení mohou mít následující hodnoty odsazení:
- Délka – v cm, px, pt atd.
- Šířka – % šířky prvku.
- dědit- převzít 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; }>Příklad: Pro demonstraci použití vlastnosti padding, ve které aplikujeme padding na každou stranu div jednotlivě.
HTML Příklad výplně><style>tělo { okraj: 0; výplň: 20px; šířka: 50 %; } h2 { barva: zelená; } .myDiv { barva pozadí: světlemodrá; ohraničení: 2px plná černá; /* Použití odsazení na každou stranu zvlášť */ padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; } .vnitřní { barva pozadí: růžová; ohraničení: 2px plná černá; šířka: 70px; výška: 50px; displej: flex; align-items: center; justify-content: center; } styl> hlava> <body> <div> <div>Pad_Boxdiv> div> tělo> html>></pre> </code> <p dir='ltr'> <b> <strong>Výstup:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="CSS-odsazení"><p>CSS padding</p> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Vlastnost zkratky pro výplň v CSS</strong> </b> </h2><p dir='ltr'><span>Vlastnost Shorthand Padding v CSS umožňuje nastavit odsazení na všech stranách (nahoře, vpravo, dole, vlevo) prvku v jednom řádku s některými kombinacemi, takže můžeme snadno použít odsazení na náš cílový prvek.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/negation-discrete-mathematics">diskrétní matematická negace</a>
</blockquote> <p dir='ltr'> <b> <strong>Při použití zkrácené vlastnosti existují čtyři případy:</strong> </b> </p> <ol><li value='1'><span>Pokud má vlastnost padding jednu hodnotu.</span></li><li value='2'><span>Pokud vlastnost padding obsahuje dvě hodnoty.</span></li><li value='3'><span>Pokud vlastnost padding obsahuje tři hodnoty.</span></li><li value='4'><span>Pokud vlastnost padding obsahuje čtyři hodnoty.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Vlastnost těsnopisu pro O</span> <b> <strong>ne Hodnota</strong> </b> </h3><p dir='ltr'><span>Pokud má vlastnost padding jednu hodnotu, použije padding na všechny strany prvku. Například výplň: 20px aplikuje 20 pixelů výplně na všechny strany rovnoměrně.</span></p> <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>Příklad:</strong> </b> <span>Chcete-li demonstrovat použití 20px odsazení na všechny strany div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Vlastnost výplně má jeden Valuetitle><style>tělo { okraj: 0; výplň: 20px; } h2 { barva: zelená; } .myDiv { barva pozadí: šedá; ohraničení: 2px plná černá; text-align: center; šířka: 40 %; /* Použije 10px odsazení na všechny strany */ padding: 20px; } .vnitřní { výška: 70px; šířka: 70px; barva pozadí: růžová; displej: flex; align-items: center; justify-content: center; } styl> hlava> <body> <div> <div>Paddingdiv> div> tělo> html>></pre> </code> <p dir='ltr'> <b> <strong>Výstup:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS-odsazení"><p>Vlastnost CSS padding s jednou hodnotou.</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/gamepigeon-android">jak získat hru pigeon na android</a>
</blockquote> <h2 id='padding-property-for-two-values'><span>Vlastnost výplně pro T</span> <b> <strong>wo hodnoty</strong> </b> </h2><p dir='ltr'><span>Pokud vlastnost padding obsahuje dvě hodnoty, pak první hodnota platí pro horní a dolní odsazení a druhá hodnota platí pro pravé a levé odsazení. Například – odsazení: 10px 20px, tj. horní a spodní odsazení je 10px, zatímco pravé a levé odsazení 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>Příklad:</strong> </b> <span>Demonstrovat použití vlastnosti padding se dvěma hodnotami.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Vlastnost výplně obsahuje dva Valuetitle><style>tělo { okraj: 0; výplň: 20px; } h2 { barva: zelená; } .myDiv { barva pozadí: šedá; ohraničení: 2px plná černá; text-align: center; šířka: 40 %; odsazení: 10px 20px; /* Použije 10px odsazení nahoře a dole, 20px odsazení vpravo a vlevo */ } .inner { height: 70px; šířka: 70px; barva pozadí: růžová; } styl> hlava> <body> <div> <div>Boxdiv> div> tělo> html>></pre> </code> <p dir='ltr'> <b> <strong>Výstup:</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>Vlastnost výplně pro</span> <b> <strong>Tři hodnoty</strong> </b> </h3><p dir='ltr'><span>Pokud vlastnost padding obsahuje tři hodnoty, pak první hodnota nastavuje horní odsazení, druhá hodnota nastavuje pravé a levé odsazení a třetí hodnota nastavuje spodní odsazení.</span></p> <p dir='ltr'><span>Například – padding: 10px 20px 30px;</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-comparable-interface">srovnatelná java</a>
</blockquote> <ul><li value='1'><span>horní výplň je 10px</span></li><li value='2'><span>pravé a levé odsazení je 20px</span></li><li value='3'><span>spodní výplň je 30px</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>Příklad:</strong> </b> <span>V tomto příkladu používáme výplň se třemi hodnotami.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Vlastnost Padding obsahuje tři hodnotytitle><style>tělo { okraj: 0; výplň: 20px; } h2 { barva: zelená; } .myDiv { barva pozadí: žlutázelená; ohraničení: 2px plná černá; text-align: center; šířka: 40 %; odsazení: 10px 20px 30px; /* Použije 10px odsazení nahoře, 20px odsazení vpravo a vlevo, 30px odsazení dole */ } .inner { height: 70px; šířka: 70px; barva pozadí: šedá; } styl> hlava> <body> <div> <div>Boxdiv> div> tělo> html>></pre> </code> <p dir='ltr'> <b> <strong>Výstup:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="CSS-odsazení"><p>CSS výplň</p> <p dir='ltr'> <br></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/c-string-find">najít v řetězci c++</a>
</blockquote> <h2 id='padding-property-having-four-values'> <b> <strong>Vlastnost výplně se čtyřmi hodnotami</strong> </b> </h2><p dir='ltr'><span>Pokud vlastnost padding obsahuje čtyři hodnoty, pak první hodnota nastavuje horní odsazení, druhá hodnota nastavuje pravé odsazení, třetí hodnota nastavuje spodní odsazení a čtvrtá hodnota nastavuje levé odsazení.:</span></p> <p dir='ltr'><span>Například – padding: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>horní výplň je 10px</span></li><li value='2'><span>pravá výplň je 5px</span></li><li value='3'><span>spodní výplň je 15px</span></li><li value='4'><span>levé odsazení 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>Příklad:</strong> </b> <span>Demonstrovat použití vlastnosti padding se čtyřmi hodnotami.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Vlastnost Padding obsahuje čtyři hodnotytitle><style>tělo { okraj: 0; výplň: 20px; } h2 { barva: zelená; } .myDiv { barva pozadí: azurová; ohraničení: 2px plná černá; text-align: center; šířka: 40 %; odsazení: 10px 20px 15px 25px; /* Použije 10px odsazení nahoře, 20px odsazení vpravo, 15px odsazení dole a 25px odsazení vlevo */ } .inner { height: 70px; šířka: 70px; barva pozadí: černá; barva bílá; displej: flex; align-items: center; justify-content: center; } styl> hlava> <body> <div> <div>Boxdiv> div> tělo> html>></pre> </code> <p dir='ltr'> <b> <strong>Výstup:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="CSS-odsazení"><p>CSS výplň</p> <h2 id='all-css-padding-properties'><span>Všechny vlastnosti odsazení CSS</span></h2><p dir='ltr'><span>Kombinací vlastností jednotlivých stran a zkrácených vlastností je celkem 5 vlastností odsazení CSS:</span></p> <table class="table"><tbody><tr><th><span>Vlastnictví</span></th><th><span>Popis</span></th></tr></tbody><tbody><tr><td> <b> <strong>vycpávka</strong> </b> </td><td><span>zkrácená vlastnost pro nastavení všech vlastností výplně v jedné deklaraci</span></td></tr><tr><td> <b> <strong>vycpávka-dno</strong> </b> </td><td><span>Nastavuje spodní výplň prvku</span></td></tr><tr><td> <b> <strong>polstrování-vlevo</strong> </b> </td><td><span>Nastaví levé odsazení prvku</span></td></tr><tr><td> <b> <strong>vycpávka-vpravo</strong> </b> </td><td><span>Nastaví správné odsazení prvku</span></td></tr><tr><td> <b> <strong>polstrování-top</strong> </b> </td><td><span>Nastavuje horní odsazení 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="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/apache-ant-tutorial/">Návod Na Apache Ant</a> </li><li> <a href="/alphabet/">Abeceda</a> </li><li> <a href="/autocad-tutorial/">Výukový Program Autocad</a> </li><li> <a href="/python-pandas/">Python-Pandy</a> </li><li> <a href="/python-exceptions/">Python-Výjimky</a> </li><li> <a href="/system-programming/">Systémové Programování</a> </li><li> <a href="/python-modules/">Python-Moduly</a> </li><li> <a href="/java-array-programs/">Java-Array-Programy</a> </li><li> <a href="/linux-commands/">Linuxové Příkazy</a> </li><li> <a href="/tcs/">Tcs</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">Sady v Pythonu</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Portál informatiky pro geeky. Obsahuje dobře napsané, dobře promyšlené a dobře vysvětlené články o informatice a programování, kvízy a otázky týkající se praxe/konkurenčního programování/firemního rozhovoru.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/sets-python"> <i class="fa fa-external-link"></i> Čtěte Více</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zajímavé Články</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/java-list-size-method">Java List size() metoda</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/generate-0-and-1-with-25-and-75-probability">Vygenerujte 0 a 1 s 25% a 75% pravděpodobností</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-result">Jaký je výsledek ∞ – ∞?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/quantile-quantile-plots">Kvantilové Kvantilové grafy</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-substring-string-python">Jak podřetězec v Pythonu</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ární Příspěvky</h2>
<div class="content">
<ul class="list"> <li><a href="/java-list">řetězec java list</a>
</li><li><a href="/typescript-foreach">foreach smyčkový strojopis</a>
</li><li><a href="/java-math-pow-method">java matematický pow</a>
</li><li><a href="/what-is-10-40">10 ze 40</a>
</li><li><a href="/if-poem-rudyard-kipling-summary-line-line-explanation-english">rudyard kipling if vysvětlení</a>
</li><li><a href="/java-map-interface">mapa v Javě</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šechna Práva Vyhrazena | <a href="//sr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vyloučení Odpovědnosti</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 Údajů</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>