Utfylling er mellomrommet mellom innholdet og den definerte kanten til et element. Polstring betyr å legge til mellomrom inne i elementet, kontrollere dets indre rom, og dermed påvirke dets dimensjoner og utseende.
Innholdsfortegnelse
CSS-polstring
CSS Padding-egenskapen brukes til å skape rom mellom elementets innhold og elementets kantlinje. Det påvirker bare innholdet inne i elementet.
CSS-polstring er forskjellig fra CSS-margin ettersom margen er mellomrommet mellom tilstøtende elementkanter og utfylling er rommet mellom innholdet og elementets kantlinje.
Vi kan uavhengig endre topp, bunn, venstre og høyre polstring ved å bruke polstringsegenskaper. CSS-polstringsegenskaper
mysql brukerliste
CSS gir egenskaper for å spesifisere utfylling for individuelle sider av et element som er definert som følger:
- polstring-topp : Stiller inn polstring for oversiden av elementet.
- polstring-høyre : Stiller inn polstring for høyre side av elementet.
- polstring-bunn : Stiller inn polstring for undersiden av elementet.
- polstring-venstre : Stiller inn polstring for venstre side av elementet.
Utfyllingsegenskaper kan ha følgende utfyllingsverdier:
- Lengde- i cm, px, pt, etc.
- Bredde- % bredde av elementet.
- arv - arv utfylling fra det overordnede elementet
Syntaks:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Eksempel: For å demonstrere bruk av padding-egenskapen der vi bruker polstring på hver side av div individuelt.
HTML
Padding Eksempeltittel><style>body { margin: 0; polstring: 20px; bredde: 50 %; } h2 { farge: grønn; } .myDiv { bakgrunnsfarge: lyseblå; kantlinje: 2px helt svart; /* Påføring av polstring på hver side individuelt */ padding-top: 80px; polstring-høyre: 100px; padding-bottom: 50px; polstring-venstre: 80px; } .inner { bakgrunnsfarge: rosa; kantlinje: 2px helt svart; bredde: 70px; høyde: 50px; display: flex; align-items: center; rettferdiggjøre-innhold: senter; } stil> hode> <body> <div> <div>Pad_Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</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 eiendom for polstring i CSS</strong> </b> </h2><p dir='ltr'><span>Shorthand Padding-egenskapen i CSS lar deg sette polstringen på alle sider (øverst, høyre, bunn, venstre) av et element i en enkelt linje med noen kombinasjoner, slik at vi enkelt kan bruke polstring til vårt målrettede element.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/net-framework">.net veiledning</a>
</blockquote> <p dir='ltr'> <b> <strong>Det er fire tilfeller når du bruker stenografi:</strong> </b> </p> <ol><li value='1'><span>Hvis utfyllingsegenskapen har én verdi.</span></li><li value='2'><span>Hvis utfyllingsegenskapen inneholder to verdier.</span></li><li value='3'><span>Hvis utfyllingsegenskapen inneholder tre verdier.</span></li><li value='4'><span>Hvis utfyllingsegenskapen inneholder fire verdier.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Stenografisk polstringseiendom for O</span> <b> <strong>ne Verdi</strong> </b> </h3><p dir='ltr'><span>Hvis utfyllingsegenskapen har én verdi, bruker den utfylling på alle sider av et element. For eksempel polstring: 20px bruker 20 piksler med polstring på alle sider likt.</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 å demonstrere bruk av 20px polstring på alle sider av div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Padding Property har én verditittel><style>body { margin: 0; polstring: 20px; } h2 { farge: grønn; } .myDiv { bakgrunnsfarge: grå; kantlinje: 2px helt svart; tekst-align: center; bredde: 40 %; /* Bruker 10px polstring på alle sider */ polstring: 20px; } .inner { height: 70px; bredde: 70px; bakgrunnsfarge: rosa; display: flex; align-items: center; rettferdiggjøre-innhold: senter; } stil> hode> <body> <div> <div>Paddingdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS-polstring"><p>CSS-utfyllingsegenskap med én verdi.</p> <h2 id='padding-property-for-two-values'><span>Utfyllingseiendom for T</span> <b> <strong>wo verdier</strong> </b> </h2><p dir='ltr'><span>Hvis utfyllingsegenskapen inneholder to verdier, gjelder den første verdien for topp- og bunnutfyllingen, og den andre verdien gjelder høyre og venstre utfylling. For eksempel – polstring: 10px 20px, dvs. topp- og bunnpolstring er 10px mens høyre 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>For å demonstrere bruk av en utfyllingsegenskap med to verdier.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Utfyllingseiendom inneholder to verdititler><style>body { margin: 0; polstring: 20px; } h2 { farge: grønn; } .myDiv { bakgrunnsfarge: grå; kantlinje: 2px helt svart; tekst-align: center; bredde: 40 %; polstring: 10px 20px; /* Bruker 10px polstring til topp og bunn, 20px polstring til høyre og venstre */ } .inner { height: 70px; bredde: 70px; bakgrunnsfarge: rosa; } stil> hode> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-format">strengformater</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 Eiendom for</span> <b> <strong>Tre verdier</strong> </b> </h3><p dir='ltr'><span>Hvis utfyllingsegenskapen inneholder tre verdier, setter den første verdien den øverste utfyllingen, den andre verdien setter høyre og venstre utfylling, og den tredje verdien setter den nederste utfyllingen.</span></p> <p dir='ltr'><span>For eksempel – polstring: 10px 20px 30px;</span></p> <ul><li value='1'><span>topppolstring er 10px</span></li><li value='2'><span>høyre og venstre polstring er 20px</span></li><li value='3'><span>bunnpolstringen 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 eksemplet bruker vi polstring med tre verdier.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Utfyllingseiendom inneholder tre verdier><style>body { margin: 0; polstring: 20px; } h2 { farge: grønn; } .myDiv { bakgrunnsfarge: gulgrønn; kantlinje: 2px helt svart; tekst-align: center; bredde: 40 %; polstring: 10px 20px 30px; /* Bruker 10px polstring til toppen, 20px polstring til høyre og venstre, 30px polstring til bunnen */ } .inner { height: 70px; bredde: 70px; bakgrunnsfarge: grå; } stil> hode> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</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 eiendom med fire verdier</strong> </b> </h2><p dir='ltr'><span>Hvis utfyllingsegenskapen inneholder fire verdier, setter den første verdien den øverste utfyllingen, den andre verdien setter den høyre utfyllingen, den tredje verdien setter den nederste utfyllingen, og den fjerde verdien setter den venstre utfyllingen.:</span></p> <p dir='ltr'><span>For eksempel – polstring: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>topppolstring er 10px</span></li><li value='2'><span>høyre polstring er 5px</span></li><li value='3'><span>bunnpolstring 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>For å demonstrere bruk av en utfyllingsegenskap med fire verdier.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/components-robot">robotkomponenter</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Utfyllingseiendom inneholder fire verdier><style>body { margin: 0; polstring: 20px; } h2 { farge: grønn; } .myDiv { bakgrunnsfarge: cyan; kantlinje: 2px helt svart; tekst-align: center; bredde: 40 %; polstring: 10px 20px 15px 25px; /* Bruker 10px polstring til toppen, 20px polstring til høyre, 15px polstring til bunnen og 25px polstring til venstre */ } .inner { height: 70px; bredde: 70px; bakgrunnsfarge: svart; farge: hvit; display: flex; align-items: center; rettferdiggjøre-innhold: senter; } stil> hode> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</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-polstringsegenskaper</span></h2><p dir='ltr'><span>Ved å kombinere individuelle sideegenskaper og stenografiegenskaper, er det 5 totale egenskaper for CSS-polstring:</span></p> <table class="table"><tbody><tr><th><span>Eiendom</span></th><th><span>Beskrivelse</span></th></tr></tbody><tbody><tr><td> <b> <strong>polstring</strong> </b> </td><td><span>stenografi-egenskap for å sette alle utfyllingsegenskapene i én erklæring</span></td></tr><tr><td> <b> <strong>polstring-bunn</strong> </b> </td><td><span>Angir bunnpolstringen til et element</span></td></tr><tr><td> <b> <strong>polstring-venstre</strong> </b> </td><td><span>Angir venstre polstring til et element</span></td></tr><tr><td> <b> <strong>polstring-høyre</strong> </b> </td><td><span>Angir riktig polstring for et element</span></td></tr><tr><td> <b> <strong>polstring-topp</strong> </b> </td><td><span>Angir den øverste polstringen til 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="/static-keyword/">Statisk Nøkkelord</a> </li><li> <a href="/c-dynamic-memory-allocation/">C-Dynamisk Minnetildeling</a> </li><li> <a href="/r-matrix/">R-Matrise</a> </li><li> <a href="/aws-tutorial/">Aws Veiledning</a> </li><li> <a href="/c-programs/">C Programmer</a> </li><li> <a href="/software-testing/">Programvaretesting</a> </li><li> <a href="/java-hashmap/">Java-Hashmap</a> </li><li> <a href="/javascript-misc/">Javascript-Diverse</a> </li><li> <a href="/c-manipulator/">C++ Manipulator</a> </li><li> <a href="/java-timestamp-class/">Java Tidsstempelklasse</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Java - RandomAccessFile</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java RandomAccessFile Class for nybegynnere og profesjonelle med eksempler på Java IO eller Input Output i Java med input stream, output stream, reader og writer class. Java.io-pakken gir api for å lese og skrive data.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-randomaccessfile"> <i class="fa fa-external-link"></i> Les Mer</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="/variance">Forskjell</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/length-width-height">Lengde bredde høyde</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/css-transition-opacity">CSS Transition Opacity</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/log-functions-python">Loggfunksjoner i Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/remove-an-element-from-arraylist-java">Fjern et element fra ArrayList 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 Innlegg</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-int-string">java int som streng</a>
</li><li><a href="/how-call-javascript-function-html">javascript kallefunksjon fra html</a>
</li><li><a href="/java-list">liste metoder java</a>
</li><li><a href="/when-was-first-computer-invented">når ble den første datamaskinen oppfunnet</a>
</li><li><a href="/urfi-javed">hvem er urfi javed</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 Rettigheter Reservert | <a href="//pt.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 Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Personvernerklæring</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>