Polsterējums ir atstarpe starp saturu un elementa noteikto apmali. Polsterējums nozīmē atstarpju pievienošanu elementa iekšienē, tā iekšējās telpas kontroli, tādējādi ietekmējot tā izmērus un izskatu.
Satura rādītājs
CSS polsterējums
CSS Padding rekvizīts tiek izmantots, lai izveidotu atstarpi starp elementa saturu un elementa apmali. Tas ietekmē tikai saturu elementā.
CSS polsterējums atšķiras no CSS piemale jo piemale ir atstarpe starp blakus esošā elementa apmalēm, bet polsterējums ir atstarpe starp saturu un elementa apmali.
Mēs varam neatkarīgi mainīt augšējo, apakšējo, kreiso un labo polsterējumu, izmantojot polsterējuma īpašības. CSS polsterējuma īpašības
centos vs rhel
CSS nodrošina rekvizītus, lai norādītu polsterējumu atsevišķām elementa malām, kas ir definētas šādi:
- polsterējums-top : Iestata elementa augšdaļas polsterējumu.
- polsterējums-pa labi : Iestata elementa labās puses polsterējumu.
- polsterējums-apakšā : Iestata elementa apakšējās malas polsterējumu.
- polsterējums-pa kreisi : Iestata elementa kreisās puses polsterējumu.
Polsterējuma rekvizītiem var būt šādas polsterējuma vērtības:
- Garums- cm, pikseļi, pt utt.
- Platums- elementa platums %.
- inherit- mantot polsterējumu no vecākelementa
Sintakse:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Piemērs: Lai parādītu, izmantojot polsterējuma rekvizītu, kurā mēs pieliekam polsterējumu katrai divpusei atsevišķi.
padarīt sh skriptu izpildāmuHTML
Padding exampletitle><style>body { margin: 0; polsterējums: 20 pikseļi; platums: 50%; } h2 { krāsa: zaļa; } .myDiv { fona krāsa: gaiši zila; apmale: 2 pikseļi vienkrāsains melns; /* Polsterējuma uzlikšana katrai pusei atsevišķi */ polsterējums-top: 80px; polsterējums pa labi: 100 pikseļi; polsterējums apakšā: 50 pikseļi; polsterējums pa kreisi: 80 pikseļi; } .inner { fona krāsa: rozā; apmale: 2px vienkrāsains melns; platums: 70 pikseļi; augstums: 50 pikseļi; displejs: flex; izlīdzināt vienumus: centrs; attaisnot-saturs: centrs; } style> head> <body> <div> <div>Pad_Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="CSS polsterējums"><p>CSS polsterējums</p> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Īsraksta rekvizīts pildīšanai CSS</strong> </b> </h2><p dir='ltr'><span>Īsraksta polsterējuma rekvizīts CSS ļauj iestatīt polsterējumu visās elementa pusēs (augšpusē, labajā pusē, apakšā, pa kreisi) vienā rindā ar dažām kombinācijām, lai mēs varētu viegli piemērot polsterējumu mūsu atlasītajam elementam.</span></p> <p dir='ltr'> <b> <strong>Ir četri gadījumi, kad tiek izmantots īsraksta rekvizīts:</strong> </b> </p> <ol><li value='1'><span>Ja polsterējuma rekvizītam ir viena vērtība.</span></li><li value='2'><span>Ja polsterējuma rekvizīts satur divas vērtības.</span></li><li value='3'><span>Ja polsterējuma rekvizīts satur trīs vērtības.</span></li><li value='4'><span>Ja pildījuma rekvizīts satur četras vērtības.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Īsraksta polsterējuma īpašums O</span> <b> <strong>ne Vērtība</strong> </b> </h3><p dir='ltr'><span>Ja polsterējuma rekvizītam ir viena vērtība, tas piemēro pildījumu visām elementa pusēm. Piemēram, polsterējums: 20 pikseļi uz visām pusēm vienādi piemēro 20 pikseļu polsterējuma.</span></p> <h3 id='syntax-1'> <b> <strong>Sintakse:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>Piemērs:</strong> </b> <span>Lai demonstrētu 20 pikseļu polsterējuma lietošanu uz visām divpusējām pusēm.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Polsterējuma īpašumam ir viens Valuetitle><style>body { margin: 0; polsterējums: 20 pikseļi; } h2 { krāsa: zaļa; } .myDiv { fona krāsa: pelēka; apmale: 2px vienkrāsains melns; teksta līdzināšana: centrs; platums: 40%; /* Visām pusēm piemēro 10 pikseļu polsterējumu */ polsterējums: 20 pikseļi; } .inner { augstums: 70 pikseļi; platums: 70 pikseļi; fona krāsa: rozā; displejs: flex; izlīdzināt vienumus: centrs; attaisnot-saturs: centrs; } style> head> <body> <div> <div>Paddingdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS polsterējums"><p>CSS polsterējuma rekvizīts ar vienu vērtību.</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-string-int">kā java ievadīt virkni uz int</a>
</blockquote> <h2 id='padding-property-for-two-values'><span>Polsterējuma īpašums T</span> <b> <strong>wo Vērtības</strong> </b> </h2><p dir='ltr'><span>Ja polsterējuma rekvizīts satur divas vērtības, tad pirmā vērtība attiecas uz augšējo un apakšējo polsterējumu, bet otrā vērtība attiecas uz labo un kreiso polsterējumu. Piemēram, polsterējums: 10 pikseļi 20 pikseļi, t.i., augšējais un apakšējais polsterējums ir 10 pikseļi, bet labais un kreisais polsterējums ir 20 pikseļi.</span></p> <h3 id='syntax-2'> <b> <strong>Sintakse:</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>Piemērs:</strong> </b> <span>Lai demonstrētu polsterējuma rekvizīta izmantošanu ar divām vērtībām.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Polsterējuma īpašums satur divus Valuetitle><style>body { margin: 0; polsterējums: 20 pikseļi; } h2 { krāsa: zaļa; } .myDiv { fona krāsa: pelēka; apmale: 2px vienkrāsains melns; teksta līdzināšana: centrs; platums: 40%; polsterējums: 10 pikseļi 20 pikseļi; /* Lieto 10 pikseļu polsterējumu augšpusē un apakšā, 20 pikseļu polsterējumu labajā un kreisajā pusē */ } .inner { height: 70px; platums: 70 pikseļi; fona krāsa: rozā; } style> head> <body> <div> <div>Boxdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="css-padding"><p>CSS polsterējums</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/fiscal-quarters-q1-q2">q4 mēneši</a>
</blockquote> <h3 id='padding-property-for-three-values'><span>Polsterējuma īpašums</span> <b> <strong>Trīs vērtības</strong> </b> </h3><p dir='ltr'><span>Ja polsterējuma rekvizīts satur trīs vērtības, tad pirmā vērtība iestata augšējo polsterējumu, otrā vērtība iestata labo un kreiso polsterējumu, bet trešā vērtība iestata apakšējo polsterējumu.</span></p> <p dir='ltr'><span>Piemēram – polsterējums: 10px 20px 30px;</span></p> <ul><li value='1'><span>augšējais polsterējums ir 10 pikseļi</span></li><li value='2'><span>labās un kreisās puses polsterējums ir 20 pikseļi</span></li><li value='3'><span>apakšējais polsterējums ir 30 pikseļi</span></li></ul><h3 id='syntax-3'> <b> <strong>Sintakse:</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>Piemērs:</strong> </b> <span>Šajā piemērā mēs izmantojam polsterējumu ar trim vērtībām.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Polsterējuma īpašums satur trīs Valuetitle><style>body { margin: 0; polsterējums: 20 pikseļi; } h2 { krāsa: zaļa; } .myDiv { fona krāsa: dzeltenzaļa; apmale: 2px vienkrāsains melns; teksta līdzināšana: centrs; platums: 40%; polsterējums: 10 pikseļi 20 pikseļi 30 pikseļi; /* Pielieto 10 pikseļu polsterējumu augšpusē, 20 pikseļu polsterējumu labajā un kreisajā pusē, 30 pikseļu polsterējumu apakšā */ } .inner { height: 70px; platums: 70 pikseļi; fona krāsa: pelēka; } style> head> <body> <div> <div>Boxdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="CSS polsterējums"><p>CSS polsterējums</p> <p dir='ltr'> <br></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-trim">java stīgu apdare</a>
</blockquote> <h2 id='padding-property-having-four-values'> <b> <strong>Polsterējuma īpašums ar četrām vērtībām</strong> </b> </h2><p dir='ltr'><span>Ja aizpildīšanas rekvizīts satur četras vērtības, tad pirmā vērtība iestata augšējo polsterējumu, otrā vērtība iestata labo polsterējumu, trešā vērtība nosaka apakšējo polsterējumu un ceturtā vērtība iestata kreiso polsterējumu.</span></p> <p dir='ltr'><span>Piemēram – polsterējums: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>augšējais polsterējums ir 10 pikseļi</span></li><li value='2'><span>labais polsterējums ir 5 pikseļi</span></li><li value='3'><span>apakšējais polsterējums ir 15 pikseļi</span></li><li value='4'><span>kreisais polsterējums ir 20 pikseļi</span></li></ul><h3 id='syntax-4'> <b> <strong>Sintakse:</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>Piemērs:</strong> </b> <span>Lai demonstrētu polsterējuma rekvizīta izmantošanu ar četrām vērtībām.</span></p>HTML<tag data-text-1=' <html> <head> <title>Polsterējuma īpašums satur četrus Valuestitle><style>body { margin: 0; polsterējums: 20 pikseļi; } h2 { krāsa: zaļa; } .myDiv { fona krāsa: ciāna; apmale: 2px vienkrāsains melns; teksta līdzināšana: centrs; platums: 40%; polsterējums: 10px 20px 15px 25px; /* Piemēro 10 pikseļu polsterējumu augšpusē, 20 pikseļu polsterējumu labajā pusē, 15 pikseļu polsterējumu apakšā un 25 pikseļu polsterējumu pa kreisi */ } .inner { height: 70px; platums: 70 pikseļi; fona krāsa: melna; krāsa: balta; displejs: flex; izlīdzināt vienumus: centrs; attaisnot-saturs: centrs; } style> head> <body> <div> <div>Boxdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="CSS polsterējums"><p>CSS polsterējums</p> <h2 id='all-css-padding-properties'><span>Visi CSS polsterējuma rekvizīti</span></h2><p dir='ltr'><span>Apvienojot atsevišķus sānu rekvizītus un saīsinātos rekvizītus, ir 5 kopējie CSS polsterējuma rekvizīti:</span></p> <table class="table"><tbody><tr><th><span>Īpašums</span></th><th><span>Apraksts</span></th></tr></tbody><tbody><tr><td> <b> <strong>polsterējums</strong> </b> </td><td><span>īsraksts rekvizīts visu pildījuma rekvizītu iestatīšanai vienā deklarācijā</span></td></tr><tr><td> <b> <strong>polsterējums-apakšā</strong> </b> </td><td><span>Iestata elementa apakšējo polsterējumu</span></td></tr><tr><td> <b> <strong>polsterējums-pa kreisi</strong> </b> </td><td><span>Iestata elementa kreiso polsterējumu</span></td></tr><tr><td> <b> <strong>polsterējums-pa labi</strong> </b> </td><td><span>Iestata elementa labo polsterējumu</span></td></tr><tr><td> <b> <strong>polsterējums-top</strong> </b> </td><td><span>Iestata elementa augšējo polsterējumu</span></td></tr></tbody></table> <br> <br></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="/java-object-oriented/">Java Objektu Orientēts</a> </li><li> <a href="/factors/">Faktori-Of</a> </li><li> <a href="/law/">Likums</a> </li><li> <a href="/priority-queue/">Prioritāte-Rinda</a> </li><li> <a href="/javascript-questions/">Javascript — Jautājumi</a> </li><li> <a href="/python-input-output/">Python-Input-Output</a> </li><li> <a href="/java-interfaces/">Java Saskarnes</a> </li><li> <a href="/python-collections-module/">Python Kolekcijas-Modulis</a> </li><li> <a href="/google/">Google</a> </li><li> <a href="/bit-magic/">Mazā maģija</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Kā pārbaudīt, vai python vārdnīca ir tukša?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kā pārbaudīt, vai python vārdnīca ir tukša, izmantojot pamācību, tkinter, pogu, pārskatu, audeklu, rāmi, vides iestatījumus, pirmo python programmu utt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-check-if-dictionary-is-empty-python"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interesanti Raksti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/get-current-directory-python">Iegūstiet pašreizējo direktoriju Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-sat-verbal-how-raise-your-reading-score-131996">Kas ir SAT verbāls? Kā paaugstināt savu lasīšanas rezultātu</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/alphabet-python">Alfabēts Python valodā</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cpp-basics/">Cpp Pamati</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-left-join">Atšķirība starp kreiso savienojumu un kreiso ārējo savienojumu</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ārākas Posts</h2>
<div class="content">
<ul class="list"> <li><a href="/ram-pothineni">pothineni auns</a>
</li><li><a href="/best-hentai-anime">top 10 hentai</a>
</li><li><a href="/shell-scripting-loop">for loop in shell skriptu</a>
</li><li><a href="/mia-khalifa">mia khalifa vecums</a>
</li><li><a href="/how-center-images-css">kā centrēt attēlu uz css</a>
</li><li><a href="/java-switch-statement">java slēdzis int</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 Visas Tiesības Aizsargātas | <a href="//tr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma 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>