Padding – tai tarpas tarp turinio ir apibrėžtos elemento kraštinės. Paminkštinimas reiškia tarpų pridėjimą elemento viduje, jo vidinės erdvės valdymą, taip paveikiant jo matmenis ir išvaizdą.
Turinys
CSS užpildymas
CSS užpildymo ypatybė naudojama tarpai tarp elemento turinio ir elemento kraštinės sukurti. Tai veikia tik elemento viduje esantį turinį.
CSS užpildymas skiriasi nuo CSS marža kaip paraštė yra tarpas tarp gretimų elemento kraštinių, o užpildymas yra tarpas tarp turinio ir elemento kraštinės.
Naudodami užpildymo savybes galime savarankiškai pakeisti viršutinį, apatinį, kairįjį ir dešinįjį užpildą. CSS užpildymo ypatybės
kelių eilučių komentaras powershell
CSS suteikia ypatybes, skirtas nurodyti atskirų elemento pusių užpildymą, kuris apibrėžiamas taip:
- kamšalas-viršus : Nustato viršutinės elemento pusės užpildymą.
- pamušalas-dešinė : Nustato dešinės elemento pusės užpildymą.
- paminkštinimas-dugnas : Nustatomas apatinės elemento pusės užpildymas.
- kamšalas-kairėje : Nustato kairiosios elemento pusės užpildymą.
Užpildymo savybės gali turėti šias užpildymo reikšmes:
- Ilgis- cm, px, pt ir kt.
- Plotis – elemento plotis %.
- paveldėti – paveldėti užpildymą iš pirminio elemento
Sintaksė:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Pavyzdys: Pademonstruoti, kaip naudoti užpildymo ypatybę, kai užpildome kiekvieną div pusę atskirai.
HTML Padding exampletitle><style>body { paraštė: 0; pamušalas: 20px; plotis: 50%; } h2 { spalva: žalia; } .myDiv { fono spalva: šviesiai mėlyna; kraštinė: 2px vientisa juoda; /* Paminkštinimas kiekvienai pusei atskirai */ padding-top: 80px; užpildymas dešinėje: 100 pikselių; pamušalas-apačioje: 50px; užpildymas kairėje: 80 pikselių; } .inner { fono spalva: rožinė; kraštinė: 2px vientisa juoda; plotis: 70px; aukštis: 50px; ekranas: lankstus; lygiuoti elementus: centre; pateisinti-turinys: centras; } style> head> <body> <div> <div>Pad_Boxdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="CSS užpildymas"><p>CSS užpildymas</p> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Sutrumpinta ypatybė užpildymui CSS</strong> </b> </h2><p dir='ltr'><span>CSS santrumpos užpildymo ypatybė leidžia nustatyti užpildymą visose elemento pusėse (viršuje, dešinėje, apačioje, kairėje) vienoje eilutėje su tam tikrais deriniais, kad galėtume lengvai pritaikyti užpildymą mūsų tiksliniam elementui.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/linux-task-manager">„Linux“ užduočių tvarkyklė</a>
</blockquote> <p dir='ltr'> <b> <strong>Yra keturi atvejai, kai naudojama trumpoji savybė:</strong> </b> </p> <ol><li value='1'><span>Jei užpildymo ypatybė turi vieną reikšmę.</span></li><li value='2'><span>Jei užpildymo ypatybėje yra dvi reikšmės.</span></li><li value='3'><span>Jei užpildymo ypatybėje yra trys reikšmės.</span></li><li value='4'><span>Jei užpildymo ypatybėje yra keturios reikšmės.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Trumpojo užpildymo savybė, skirta O</span> <b> <strong>ne Vertė</strong> </b> </h3><p dir='ltr'><span>Jei užpildymo ypatybė turi vieną reikšmę, tada užpildymas taikomas visoms elemento pusėms. Pavyzdžiui, užpildymas: 20 pikselių pritaiko 20 pikselių užpildymo visose pusėse vienodai.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/alya-manasa">alya manasa</a>
</blockquote> <h3 id='syntax-1'> <b> <strong>Sintaksė:</strong> </b> </h3><tag data-text-3='.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre> </code><p dir='ltr'> <b> <strong>Pavyzdys:</strong> </b> <span>Norėdami parodyti 20 pikselių užpildymą visose div pusėse.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Padding Property turi vieną vertės pavadinimą><style>body { paraštė: 0; pamušalas: 20px; } h2 { spalva: žalia; } .myDiv { fono spalva: pilka; kraštinė: 2px vientisa juoda; teksto lygiavimas: centre; plotis: 40%; /* Visoms pusėms taikomas 10 pikselių užpildymas */ užpildymas: 20 pikselių; } .inner { aukštis: 70 piks.; plotis: 70px; fono spalva: rožinė; ekranas: lankstus; lygiuoti elementus: centre; pateisinti-turinys: centras; } style> head> <body> <div> <div>Paddingdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS užpildymas"><p>CSS užpildymo ypatybė su viena verte.</p> <h2 id='padding-property-for-two-values'><span>Paminkštinimo turtas T</span> <b> <strong>wo Vertybės</strong> </b> </h2><p dir='ltr'><span>Jei užpildymo savybėje yra dvi reikšmės, pirmoji reikšmė taikoma viršutiniam ir apatiniam užpildymui, o antroji reikšmė taikoma dešiniajam ir kairiajam užpildymui. Pavyzdžiui, užpildymas: 10 pikselių 20 pikselių, t. y. viršutinis ir apatinis užpildymas yra 10 pikselių, o dešinysis ir kairysis užpildymas yra 20 pikselių.</span></p> <h3 id='syntax-2'> <b> <strong>Sintaksė:</strong> </b> </h3><tag data-text-3='.element { /* Applies 10px padding to top and bottom, 20px padding to right and left */ padding: 10px 20px; }></pre> </code><p dir='ltr'> <b> <strong>Pavyzdys:</strong> </b> <span>Norėdami parodyti užpildymo savybę su dviem reikšmėmis.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Padding Property Contains Two Valuetitle><style>body { paraštė: 0; pamušalas: 20px; } h2 { spalva: žalia; } .myDiv { fono spalva: pilka; kraštinė: 2px vientisa juoda; teksto lygiavimas: centre; plotis: 40%; užpildymas: 10 piks. 20 piks.; /* Taiko 10 pikselių užpildymą viršuje ir apačioje, 20 pikselių užpildymą dešinėje ir kairėje */ } .inner { height: 70px; plotis: 70px; fono spalva: rožinė; } style> head> <body> <div> <div>Boxdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-find-array-length-java">java len of masyvo</a>
</blockquote> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="css užpildymas"><p>CSS užpildas</p> <h3 id='padding-property-for-three-values'><span>Padding Property for</span> <b> <strong>Trys vertybės</strong> </b> </h3><p dir='ltr'><span>Jei užpildymo ypatybėje yra trys reikšmės, pirmoji vertė nustato viršutinį užpildymą, antroji vertė – dešinįjį ir kairįjį užpildymą, o trečioji vertė – apatinį užpildymą.</span></p> <p dir='ltr'><span>Pavyzdžiui – užpildymas: 10px 20px 30px;</span></p> <ul><li value='1'><span>viršutinis užpildas yra 10 pikselių</span></li><li value='2'><span>dešinysis ir kairysis užpildymas yra 20 pikselių</span></li><li value='3'><span>apatinis užpildas yra 30 pikselių</span></li></ul><h3 id='syntax-3'> <b> <strong>Sintaksė:</strong> </b> </h3><tag data-text-3='.element { /* Applies 10px padding to top, 20px padding to right and left, 30px padding to bottom */ padding: 10px 20px 30px; }></pre> </code><p dir='ltr'> <b> <strong>Pavyzdys:</strong> </b> <span>Šiame pavyzdyje mes naudojame užpildymą su trimis reikšmėmis.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Padding Property Contains Three Valuestitle><style>body { paraštė: 0; pamušalas: 20px; } h2 { spalva: žalia; } .myDiv { fono spalva: geltonai žalia; kraštinė: 2px vientisa juoda; teksto lygiavimas: centre; plotis: 40%; užpildymas: 10px 20px 30px; /* Taiko 10 pikselių užpildymą viršuje, 20 pikselių užpildymą dešinėje ir kairėje, 30 pikselių užpildymą apačioje */ } .inner { height: 70px; plotis: 70px; fono spalva: pilka; } style> head> <body> <div> <div>Boxdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="CSS užpildymas"><p>CSS užpildas</p> <p dir='ltr'> <br></p> <h2 id='padding-property-having-four-values'> <b> <strong>Keturių verčių užpildymo turtas</strong> </b> </h2><p dir='ltr'><span>Jei užpildymo ypatybėje yra keturios reikšmės, pirmoji reikšmė nustato viršutinį užpildymą, antrąją – dešinįjį, trečiąja – apatinį, o ketvirtąja – kairįjį užpildymą.:</span></p> <p dir='ltr'><span>Pavyzdžiui – užpildymas: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>viršutinis užpildas yra 10 pikselių</span></li><li value='2'><span>dešinysis užpildas yra 5 pikseliai</span></li><li value='3'><span>apatinis užpildas yra 15 pikselių</span></li><li value='4'><span>kairysis užpildas yra 20 pikselių</span></li></ul><h3 id='syntax-4'> <b> <strong>Sintaksė:</strong> </b> </h3><tag data-text-3='.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> </code><p dir='ltr'> <b> <strong>Pavyzdys:</strong> </b> <span>Norėdami parodyti užpildymo ypatybę su keturiomis reikšmėmis.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/searching-algorithms">paieškos algoritmai</a>
</blockquote>HTML<tag data-text-1=' <html> <head> <title>Padding Property Contains Four Valuestitle><style>body { paraštė: 0; pamušalas: 20px; } h2 { spalva: žalia; } .myDiv { fono spalva: žalsvai mėlyna; kraštinė: 2px vientisa juoda; teksto lygiavimas: centre; plotis: 40%; užpildymas: 10 piks. 20 piks. 15 piks. 25 piks.; /* Taiko 10 pikselių užpildymą viršuje, 20 pikselių užpildymą dešinėje, 15 pikselių užpildymą apačioje ir 25 pikselių užpildymą kairėje */ } .inner { height: 70px; plotis: 70px; fono spalva: juoda; spalva: balta; ekranas: lankstus; lygiuoti elementus: centre; pateisinti-turinys: centras; } style> head> <body> <div> <div>Boxdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="CSS užpildymas"><p>CSS užpildas</p> <h2 id='all-css-padding-properties'><span>Visos CSS užpildymo ypatybės</span></h2><p dir='ltr'><span>Sujungus atskiras šonines ir trumpąsias savybes, iš viso yra 5 CSS užpildymo savybės:</span></p> <table class="table"><tbody><tr><th><span>Nuosavybė</span></th><th><span>apibūdinimas</span></th></tr></tbody><tbody><tr><td> <b> <strong>paminkštinimas</strong> </b> </td><td><span>stenografinė savybė, skirta nustatyti visas užpildymo ypatybes vienoje deklaracijoje</span></td></tr><tr><td> <b> <strong>paminkštinimas-dugnas</strong> </b> </td><td><span>Nustato apatinį elemento užpildą</span></td></tr><tr><td> <b> <strong>kamšalas-kairėje</strong> </b> </td><td><span>Nustato kairįjį elemento užpildymą</span></td></tr><tr><td> <b> <strong>pamušalas-dešinė</strong> </b> </td><td><span>Nustato tinkamą elemento užpildymą</span></td></tr><tr><td> <b> <strong>kamšalas-viršus</strong> </b> </td><td><span>Nustato viršutinį elemento užpildą</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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/c-input-output-quiz/">C Įvesties Ir Išvesties Viktorina</a> </li><li> <a href="/dbms-er-model/">Dbms-Er Modelis</a> </li><li> <a href="/osi/">Taip Pat</a> </li><li> <a href="/mcq/">Mcq</a> </li><li> <a href="/anime/">Anime</a> </li><li> <a href="/cpp-input-output/">Cpp-Input-Output</a> </li><li> <a href="/microservices-tutorial/">Mikropaslaugų Pamoka</a> </li><li> <a href="/priority-queue/">Prioritetas-Eilė</a> </li><li> <a href="/puzzles/">Galvosūkiai</a> </li><li> <a href="/mensuration-3d/">3D Matavimas</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">Raskite, jei eilutė yra k-palindrome, ar ne | 2 rinkinys</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Pateikdami eilutę, sužinokite, ar eilutė yra k-palindrome, ar ne. K-palindromo eilutė virsta palindromu, kai iš jos pašalinama daugiausiai k simbolių. Išaiškinimai:</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/find-if-string-is-k-palindrome-or-not-set-2"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/fork-c">šakutė () C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/greek-alphabet-symbols">Graikų abėcėlė: simboliai, raidės, vardai ir pavyzdžiai</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/best-32-bit-linux-operating-system">Geriausia 32 bitų Linux operacinė sistema</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-many-cups-is-500ml-water">Kiek puodelių yra 500 ml vandens?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/penn-state-vs-upenn-which-is-ivy-league-13194">Penn State vs UPenn: kas yra „Ivy League“?</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">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/first-java-program-hello-world-example">Java pavyzdinis kodas</a>
</li><li><a href="/java-convert-string-int">eilutę konvertuoti į sveikąjį skaičių</a>
</li><li><a href="/how-find-out-my-monitor-size">koks mano kompiuterio ekrano dydis</a>
</li><li><a href="/alisa-manyonok">alisa manyonok</a>
</li><li><a href="/java-string-contains">java poeilutė yra</a>
</li><li><a href="/k-nearest-neighbor-algorithm">k-nn algoritmas</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 Visos Teisės Saugomos | <a href="//de.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika</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>