Padding er rummet mellem indholdet og den definerede kant af et element. Polstring betyder at tilføje mellemrum inde i elementet, kontrollere dets indre rum og dermed påvirke dets dimensioner og udseende.
Indholdsfortegnelse
CSS polstring
CSS Padding-egenskaben bruges til at skabe mellemrum mellem elementets indhold og elementets kant. Det påvirker kun indholdet inde i elementet.
CSS-polstring er forskellig fra CSS-margen da marginen er mellemrummet mellem tilstødende elementkanter, og polstring er mellemrummet mellem indhold og elementets kant.
Vi kan uafhængigt ændre top, bund, venstre og højre polstring ved hjælp af polstringsegenskaber. CSS-polstringsegenskaber
javafx på eclipse
CSS giver egenskaber til at angive polstring for individuelle sider af et element, som er defineret som følger:
- polstring-top : Indstiller polstringen for oversiden af elementet.
- polstring-højre : Indstiller polstringen til højre side af elementet.
- polstring-bund : Indstiller polstringen for undersiden af elementet.
- polstring-venstre : Indstiller polstringen til venstre side af elementet.
Udfyldningsegenskaber kan have følgende udfyldningsværdier:
- Længde- i cm, px, pt osv.
- Bredde- % bredde af elementet.
- arv - arv polstring fra det overordnede element
Syntaks:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Eksempel: For at demonstrere brugen af padding-egenskaben, hvor vi anvender polstring på hver side af div'en individuelt.
HTML
Padding Eksempeltitel><style>krop { margin: 0; polstring: 20px; bredde: 50%; } h2 { farve: grøn; } .myDiv { baggrundsfarve: lyseblå; kant: 2px ensfarvet sort; /* Påføring af polstring på hver side individuelt */ padding-top: 80px; polstring-højre: 100px; polstring-bund: 50px; polstring-venstre: 80px; } .inner { baggrundsfarve: pink; kant: 2px ensfarvet sort; bredde: 70px; højde: 50px; display: flex; align-items: center; retfærdiggøre-indhold: center; } stil> hoved> <body> <div> <div>Pad_Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="CSS-polstring"><p>CSS polstring</p> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Stenografi ejendom til polstring i CSS</strong> </b> </h2><p dir='ltr'><span>Shorthand Padding-egenskaben i CSS giver dig mulighed for at indstille polstringen på alle sider (øverst, højre, nederst, venstre) af et element i en enkelt linje med nogle kombinationer, så vi nemt kan anvende polstring til vores målrettede element.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/net-framework">.net tutorial</a>
</blockquote> <p dir='ltr'> <b> <strong>Der er fire tilfælde, når du bruger stenografi:</strong> </b> </p> <ol><li value='1'><span>Hvis udfyldningsegenskaben har én værdi.</span></li><li value='2'><span>Hvis udfyldningsegenskaben indeholder to værdier.</span></li><li value='3'><span>Hvis udfyldningsegenskaben indeholder tre værdier.</span></li><li value='4'><span>Hvis udfyldningsegenskaben indeholder fire værdier.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Stenografisk polstringsejendom til O</span> <b> <strong>ne Værdi</strong> </b> </h3><p dir='ltr'><span>Hvis udfyldningsegenskaben har én værdi, anvender den udfyldning på alle sider af et element. For eksempel polstring: 20px anvender 20 pixels polstring ligeligt på alle sider.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/data-structures-tutorial">datastrukturer java</a>
</blockquote> <h3 id='syntax-1'> <b> <strong>Syntaks:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>Eksempel:</strong> </b> <span>For at demonstrere anvendelse af 20px polstring på alle sider af div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Padding Property har én værdititel><style>krop { margin: 0; polstring: 20px; } h2 { farve: grøn; } .myDiv { baggrundsfarve: grå; kant: 2px ensfarvet sort; tekst-align: center; bredde: 40%; /* Anvender 10px polstring til alle sider */ polstring: 20px; } .inner { højde: 70px; bredde: 70px; baggrundsfarve: pink; display: flex; align-items: center; retfærdiggøre-indhold: center; } stil> hoved> <body> <div> <div>Paddingdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS-polstring"><p>CSS-udfyldningsegenskab med én værdi.</p> <h2 id='padding-property-for-two-values'><span>Polstringsejendom til T</span> <b> <strong>wo Værdier</strong> </b> </h2><p dir='ltr'><span>Hvis udfyldningsegenskaben indeholder to værdier, gælder den første værdi for den øverste og nederste udfyldning, og den anden værdi gælder for den højre og venstre udfyldning. For eksempel – polstring: 10px 20px, dvs. top- og bundpolstring er 10px, mens højre og venstre polstring er 20px.</span></p> <h3 id='syntax-2'> <b> <strong>Syntaks:</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>Eksempel:</strong> </b> <span>At demonstrere brugen af en udfyldningsegenskab med to værdier.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Padding Property indeholder to Valuetitles><style>krop { margin: 0; polstring: 20px; } h2 { farve: grøn; } .myDiv { baggrundsfarve: grå; kant: 2px ensfarvet sort; tekst-align: center; bredde: 40%; polstring: 10px 20px; /* Anvender 10px polstring til top og bund, 20px polstring til højre og venstre */ } .inner { height: 70px; bredde: 70px; baggrundsfarve: pink; } stil> hoved> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/rsa-encryption-algorithm">Algoritme til rsa</a>
</blockquote> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="css-polstring"><p>CSS polstring</p> <h3 id='padding-property-for-three-values'><span>Polstring Ejendom til</span> <b> <strong>Tre værdier</strong> </b> </h3><p dir='ltr'><span>Hvis udfyldningsegenskaben indeholder tre værdier, sætter den første værdi den øverste polstring, den anden værdi angiver højre og venstre polstring, og den tredje værdi angiver bundpolstringen.</span></p> <p dir='ltr'><span>For eksempel – polstring: 10px 20px 30px;</span></p> <ul><li value='1'><span>toppolstring er 10px</span></li><li value='2'><span>højre og venstre polstring er 20px</span></li><li value='3'><span>bundpolstring er 30px</span></li></ul><h3 id='syntax-3'> <b> <strong>Syntaks:</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>Eksempel:</strong> </b> <span>I dette eksempel bruger vi polstring med tre værdier.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Udfyldningsegenskab indeholder tre værdier><style>krop { margin: 0; polstring: 20px; } h2 { farve: grøn; } .myDiv { baggrundsfarve: gulgrøn; kant: 2px ensfarvet sort; tekst-align: center; bredde: 40%; polstring: 10px 20px 30px; /* Anvender 10px polstring til toppen, 20px polstring til højre og venstre, 30px polstring til bunden */ } .inner { height: 70px; bredde: 70px; baggrundsfarve: grå; } stil> hoved> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="CSS-polstring"><p>CSS polstring</p> <p dir='ltr'> <br></p> <h2 id='padding-property-having-four-values'> <b> <strong>Polstring af ejendom med fire værdier</strong> </b> </h2><p dir='ltr'><span>Hvis udfyldningsegenskaben indeholder fire værdier, sætter den første værdi den øverste polstring, den anden værdi angiver den højre polstring, den tredje værdi angiver den nederste polstring, og den fjerde værdi angiver den venstre polstring.:</span></p> <p dir='ltr'><span>For eksempel – polstring: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>toppolstring er 10px</span></li><li value='2'><span>højre polstring er 5px</span></li><li value='3'><span>bundpolstring er 15px</span></li><li value='4'><span>venstre polstring er 20px</span></li></ul><h3 id='syntax-4'> <b> <strong>Syntaks:</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>Eksempel:</strong> </b> <span>At demonstrere brugen af en udfyldningsegenskab med fire værdier.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-if-else-statement">hvis-else java</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Padding Property Intains Fire Valuestitle><style>krop { margin: 0; polstring: 20px; } h2 { farve: grøn; } .myDiv { baggrundsfarve: cyan; kant: 2px ensfarvet sort; tekst-align: center; bredde: 40%; polstring: 10px 20px 15px 25px; /* Anvender 10px polstring til toppen, 20px polstring til højre, 15px polstring til bunden og 25px polstring til venstre */ } .inner { height: 70px; bredde: 70px; baggrundsfarve: sort; farve: hvid; display: flex; align-items: center; retfærdiggøre-indhold: center; } stil> hoved> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="CSS-polstring"><p>CSS polstring</p> <h2 id='all-css-padding-properties'><span>Alle CSS-polstringsegenskaber</span></h2><p dir='ltr'><span>Ved at kombinere individuelle sideegenskaber og stenografiegenskaber er der i alt 5 egenskaber for CSS-polstring:</span></p> <table class="table"><tbody><tr><th><span>Ejendom</span></th><th><span>Beskrivelse</span></th></tr></tbody><tbody><tr><td> <b> <strong>polstring</strong> </b> </td><td><span>stenografi-egenskab til indstilling af alle udfyldningsegenskaber i én erklæring</span></td></tr><tr><td> <b> <strong>polstring-bund</strong> </b> </td><td><span>Indstiller bundpolstringen af et element</span></td></tr><tr><td> <b> <strong>polstring-venstre</strong> </b> </td><td><span>Indstiller venstre polstring af et element</span></td></tr><tr><td> <b> <strong>polstring-højre</strong> </b> </td><td><span>Indstiller den rigtige polstring af et element</span></td></tr><tr><td> <b> <strong>polstring-top</strong> </b> </td><td><span>Indstiller den øverste polstring af et element</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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/cpp-string/">Cpp-Streng</a> </li><li> <a href="/java-enum-class/">Java Enum Klasse</a> </li><li> <a href="/medlife/">Medlife</a> </li><li> <a href="/physics-concepts/">Fysik-Begreber</a> </li><li> <a href="/alphabet/">Alfabet</a> </li><li> <a href="/java-conversion/">Java-Konvertering</a> </li><li> <a href="/chemistry/">Kemi</a> </li><li> <a href="/english-blogs/">Engelske Blogs</a> </li><li> <a href="/css-tutorial/">Css Tutorial</a> </li><li> <a href="/typescript-tutorial/">Typescript-Vejledning</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">SAT Essay Rubrik: Fuld analyse og skrivestrategier</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> SAT Essay-rubrikken kan være kompleks og svær at forstå. Her nedbryder vi, hvordan rubrikken fungerer, og hvordan du opnår en topscore. BEMÆRK: SAT Essay tilbydes ikke længere</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/sat-essay-rubric-full-analysis-1311542"> <i class="fa fa-external-link"></i> Læs Mere</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikler</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/regex-tutorial-how-write-regular-expressions">Regex Tutorial – Hvordan skriver man regulære udtryk?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/richest-footballer-world-2024">Verdens rigeste fodboldspiller 2024</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linux-host-command">Linux-værtskommando</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/gabapentin-alternatives">Gabapentin alternativer</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-threads-how-create-thread-java">Java-tråde | Sådan opretter du en tråd i 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ære Indlæg</h2>
<div class="content">
<ul class="list"> <li><a href="/loops-java">java til loop</a>
</li><li><a href="/one-billion-million">1 milliard til mio</a>
</li><li><a href="/pandas-dataframe-loc">df loc</a>
</li><li><a href="/java-arrays">java arrays</a>
</li><li><a href="/anonymous-function-java">java anonym funktion</a>
</li><li><a href="/reference-data-types-java">java referencetyper</a>
</li><li><a href="/latex-fonts-size-styles">størrelse latex skrifttype</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 Rettigheder Forbeholdes | <a href="//hr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Os</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatlivspolitik</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>