Täyte on sisällön ja elementin määritellyn reunan välinen tila. Pehmusteella tarkoitetaan elementin sisätilojen lisäämistä, sen sisäisen tilan hallintaa, mikä vaikuttaa sen mittoihin ja ulkonäköön.
Sisällysluettelo
CSS-täyte
CSS Padding -ominaisuutta käytetään luomaan tilaa elementin sisällön ja elementin reunan väliin. Se vaikuttaa vain elementin sisältöön.
CSS-täyte eroaa CSS-marginaali koska marginaali on vierekkäisten elementtien reunojen välinen tila ja täyte on sisällön ja elementin reunuksen välinen tila.
Voimme vaihtaa itsenäisesti ylä-, ala-, vasen- ja oikea täyte täyttöominaisuuksien avulla. CSS-täytön ominaisuudet
java luokkakaavio
CSS tarjoaa ominaisuuksia, joilla voidaan määrittää elementin yksittäisten sivujen täyte, jotka määritellään seuraavasti:
- pehmuste-top : Asettaa elementin yläpuolen pehmusteen.
- pehmuste-oikea : Asettaa pehmusteen elementin oikealle puolelle.
- pehmuste-pohja : Asettaa pehmusteen elementin alapuolelle.
- pehmuste-vasen : Asettaa pehmusteen elementin vasemmalle puolelle.
Täyteominaisuuksilla voi olla seuraavat täytearvot:
- Pituus cm, px, pt jne.
- Leveys- % elementin leveys.
- periy - peri täytteen pääelementistä
Syntaksi:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Esimerkki: Havainnollistaa täyttöominaisuuden käyttöä, jossa lisäämme täyttöä div:n kummallekin puolelle erikseen.
HTML
Padding Esimerkkiotsikko><style>body { marginaali: 0; täyte: 20px; leveys: 50 %; } h2 { väri: vihreä; } .myDiv { taustaväri: vaaleansininen; reuna: 2px tasainen musta; /* Pehmusteen lisääminen kummallekin puolelle erikseen */ pehmuste-top: 80px; täyte-oikea: 100px; pehmuste-ala: 50px; täyte-vasen: 80px; } .inner { taustaväri: vaaleanpunainen; reuna: 2px tasainen musta; leveys: 70px; korkeus: 50px; näyttö: flex; kohdista kohteet: keskellä; perustella-sisältö: keskus; } style> head> <body> <div> <div>Pad_Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="CSS-täyte"><p>CSS-täyte</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-is-full-form-xd">mitä tämä tarkoittaa xd</a>
</blockquote> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Pikakirjoitusominaisuus täytetystä varten CSS:ssä</strong> </b> </h2><p dir='ltr'><span>CSS:n Shorthand Padding Property -ominaisuuden avulla voit asettaa täytön elementin kaikille sivuille (ylä, oikea, alhainen, vasen) yhdelle riville joissakin yhdistelmissä, jotta voimme helposti lisätä täytön kohdistetulle elementille.</span></p> <p dir='ltr'> <b> <strong>Pikakirjoitusominaisuutta käytettäessä on neljä tapausta:</strong> </b> </p> <ol><li value='1'><span>Jos täyttöominaisuudella on yksi arvo.</span></li><li value='2'><span>Jos täyteominaisuus sisältää kaksi arvoa.</span></li><li value='3'><span>Jos täyteominaisuus sisältää kolme arvoa.</span></li><li value='4'><span>Jos täyteominaisuus sisältää neljä arvoa.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Pikakirjallinen täyteominaisuus O</span> <b> <strong>ne Arvo</strong> </b> </h3><p dir='ltr'><span>Jos täyteominaisuudella on yksi arvo, se käyttää täyttöä elementin kaikilla sivuilla. Esimerkiksi täyttö: 20px lisää 20 pikseliä täytetystä kaikille sivuille tasaisesti.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-queue-interface">jono javassa</a>
</blockquote> <h3 id='syntax-1'> <b> <strong>Syntaksi:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>Esimerkki:</strong> </b> <span>Havainnollistaa 20px-täytön käyttämistä div:n kaikille puolille.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Täyte-omaisuudella on yksi arvonimi><style>body { marginaali: 0; täyte: 20px; } h2 { väri: vihreä; } .myDiv { taustaväri: harmaa; reuna: 2px tasainen musta; tekstin tasaus: keskellä; leveys: 40 %; /* Koskee 10px-täyttöä kaikille sivuille */ täyttö: 20px; } .inner { korkeus: 70px; leveys: 70px; taustaväri: vaaleanpunainen; näyttö: flex; kohdista kohteet: keskellä; perustella-sisältö: keskus; } style> head> <body> <div> <div>Paddingdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS-täyte"><p>CSS-täyteominaisuus yhdellä arvolla.</p> <h2 id='padding-property-for-two-values'><span>Täyteominaisuus T</span> <b> <strong>wo Arvot</strong> </b> </h2><p dir='ltr'><span>Jos täyteominaisuus sisältää kaksi arvoa, ensimmäinen arvo koskee ylä- ja alatäyttöä ja toinen arvo oikeaa ja vasenta täyttöä. Esimerkiksi - täyttö: 10px 20px eli ylä- ja alareunus ovat 10px, kun taas oikea ja vasen täyttö ovat 20px.</span></p> <h3 id='syntax-2'> <b> <strong>Syntaksi:</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>Esimerkki:</strong> </b> <span>Havainnollistaa kahden arvon täyttämisominaisuuden käyttöä.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Täyteominaisuus sisältää kaksi Valuetitle><style>body { marginaali: 0; täyte: 20px; } h2 { väri: vihreä; } .myDiv { taustaväri: harmaa; reuna: 2px tasainen musta; tekstin tasaus: keskellä; leveys: 40 %; täyte: 10px 20px; /* Käyttää 10 kuvapisteen täyttöä ylä- ja alareunassa, 20 kuvapisteen täytetystä oikealle ja vasemmalle */ } .inner { height: 70px; leveys: 70px; taustaväri: vaaleanpunainen; } style> head> <body> <div> <div>Boxdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="css-täyte"><p>CSS-täyte</p> <h3 id='padding-property-for-three-values'><span>Padding Property for</span> <b> <strong>Kolme arvoa</strong> </b> </h3><p dir='ltr'><span>Jos täyteominaisuus sisältää kolme arvoa, ensimmäinen arvo asettaa ylätäytön, toinen arvo asettaa oikean ja vasemman täytön ja kolmas arvo asettaa alatäytön.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/rename-folder-linux">kansion uudelleennimeäminen linuxissa</a>
</blockquote> <p dir='ltr'><span>Esimerkiksi – täyte: 10px 20px 30px;</span></p> <ul><li value='1'><span>yläpehmuste on 10px</span></li><li value='2'><span>oikea ja vasen täyte on 20px</span></li><li value='3'><span>alaosan pehmuste on 30px</span></li></ul><h3 id='syntax-3'> <b> <strong>Syntaksi:</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>Esimerkki:</strong> </b> <span>Tässä esimerkissä käytämme täytetystä kolmella arvolla.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Täyteominaisuus sisältää kolme Valuestitle><style>body { marginaali: 0; täyte: 20px; } h2 { väri: vihreä; } .myDiv { taustaväri: keltavihreä; reuna: 2px tasainen musta; tekstin tasaus: keskellä; leveys: 40 %; täyte: 10px 20px 30px; /* Käyttää 10 kuvapisteen täyttöä ylhäällä, 20 kuvapisteen täytetystä oikealle ja vasemmalle, 30 kuvapisteen täytetystä alapuolelle */ } .inner { height: 70px; leveys: 70px; taustaväri: harmaa; } style> head> <body> <div> <div>Boxdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="CSS-täyte"><p>CSS-täyte</p> <p dir='ltr'> <br></p> <h2 id='padding-property-having-four-values'> <b> <strong>Täyteominaisuus, jolla on neljä arvoa</strong> </b> </h2><p dir='ltr'><span>Jos täyteominaisuus sisältää neljä arvoa, ensimmäinen arvo asettaa ylätäytön, toinen arvo asettaa oikean täytön, kolmas arvo asettaa alaosan ja neljäs arvo asettaa vasemman täytön.:</span></p> <p dir='ltr'><span>Esimerkiksi – täyte: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>yläpehmuste on 10px</span></li><li value='2'><span>oikea täyte on 5px</span></li><li value='3'><span>alaosan pehmuste on 15px</span></li><li value='4'><span>vasen täyte on 20px</span></li></ul><h3 id='syntax-4'> <b> <strong>Syntaksi:</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>Esimerkki:</strong> </b> <span>Havainnollistaa neljän arvon täyttämisominaisuuden käyttöä.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-generate-random-number-java">kuinka luoda satunnaislukuja javassa</a>
</blockquote>HTML<tag data-text-1=' <html> <head> <title>Padding Property sisältää neljä Valuestitle><style>body { marginaali: 0; täyte: 20px; } h2 { väri: vihreä; } .myDiv { taustaväri: syaani; reuna: 2px tasainen musta; tekstin tasaus: keskellä; leveys: 40 %; täyte: 10px 20px 15px 25px; /* Käyttää 10 kuvapisteen täyttöä ylhäällä, 20 kuvapistettä oikealla, 15 kuvapistettä alareunaa ja 25 kuvapistettä vasemmalla */ } .inner { height: 70px; leveys: 70px; taustaväri: musta; väri valkoinen; näyttö: flex; kohdista kohteet: keskellä; perustella-sisältö: keskus; } style> head> <body> <div> <div>Boxdiv> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="CSS-täyte"><p>CSS-täyte</p> <h2 id='all-css-padding-properties'><span>Kaikki CSS-täytön ominaisuudet</span></h2><p dir='ltr'><span>Yhdistämällä yksittäiset sivuominaisuudet ja lyhenneominaisuudet, CSS-täytteellä on yhteensä 5 ominaisuutta:</span></p> <table class="table"><tbody><tr><th><span>Omaisuus</span></th><th><span>Kuvaus</span></th></tr></tbody><tbody><tr><td> <b> <strong>pehmuste</strong> </b> </td><td><span>shorthand-ominaisuus kaikkien täyteominaisuuksien asettamiseen yhdessä ilmoituksessa</span></td></tr><tr><td> <b> <strong>pehmuste-pohja</strong> </b> </td><td><span>Asettaa elementin alaosan</span></td></tr><tr><td> <b> <strong>pehmuste-vasen</strong> </b> </td><td><span>Asettaa elementin vasemman täytön</span></td></tr><tr><td> <b> <strong>pehmuste-oikea</strong> </b> </td><td><span>Asettaa elementin oikean täytön</span></td></tr><tr><td> <b> <strong>pehmuste-top</strong> </b> </td><td><span>Asettaa elementin yläpehmusteen</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="">Luokka</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-numpy-matrix-function/">Python Numpy-Matriisifunktio</a> </li><li> <a href="/windows-errors/">Windows-Virheet</a> </li><li> <a href="/python-oop/">Python-Oop</a> </li><li> <a href="/stl/">Stl</a> </li><li> <a href="/python-datatype/">Python-Tietotyyppi</a> </li><li> <a href="/dsa-blogs/">Dsa-Blogit</a> </li><li> <a href="/how-install/">Miten Asentaa</a> </li><li> <a href="/python-tkinter/">Python-Tkinter</a> </li><li> <a href="/pl-sql-tutorial/">Pl/Sql Opetusohjelma</a> </li><li> <a href="/java-new-features/">Java Uusia Ominaisuuksia</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Jono C++ Standard Template Libraryssa (STL)</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Tietojenkäsittelytieteen portaali nörteille. Se sisältää hyvin kirjoitettuja, harkittuja ja hyvin selitettyjä tietojenkäsittelytieteen ja ohjelmoinnin artikkeleita, tietokilpailuja ja käytännön / kilpailullisen ohjelmoinnin / yrityshaastattelun kysymyksiä.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/queue-c-standard-template-library"> <i class="fa fa-external-link"></i> Lue Lisää</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Mielenkiintoisia Artikkeleita</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/relative-frequency-formula">Suhteellinen taajuus: kaava, määritelmä ja kuinka löytää suhteellinen taajuus</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-initialize-empty-array-given-length">Python – Alusta tietyn pituinen tyhjä taulukko</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-special-character">Mikä on erikoishahmo?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ranveer-singh">Ranveer Singh</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-switch-statement">C Vaihtolauseke</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">Suosittu Viestiä</h2>
<div class="content">
<ul class="list"> <li><a href="/how-sort-arraylist-java">lajittele taulukkoluettelo</a>
</li><li><a href="/java-convert-int-string">java-numero merkkijonoon</a>
</li><li><a href="/css-bold-text">lihavoitu teksti css:ssä</a>
</li><li><a href="/dfs-algorithm">algoritmin syvyys ensimmäinen haku</a>
</li><li><a href="/alpha-beta-pruning">alfa-beta karsiminen</a>
</li><li><a href="/what-are-comments-css">css kommentti</a>
</li><li><a href="/nick-pulos">vain nimimerkki</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 Kaikki Oikeudet Pidätetään | <a href="//techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vastuuvapauslauseke</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Meistä</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Tietosuojakäytäntö</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>