Umplutura este spațiul dintre conținut și chenarul definit al unui element. Umplutura înseamnă adăugarea de spații în interiorul elementului, controlul spațiului său interior, afectându-i astfel dimensiunile și aspectul.
Cuprins
Umplutură CSS
Proprietatea CSS Padding este folosită pentru a crea spațiu între conținutul elementului și chenarul elementului. Afectează numai conținutul din interiorul elementului.
Umplutura CSS este diferită de Marja CSS deoarece marginea este spațiul dintre chenarele elementelor adiacente, iar umplutura este spațiul dintre conținut și chenarul elementului.
Putem schimba în mod independent umplutura de sus, de jos, din stânga și din dreapta folosind proprietățile de umplutură. Proprietăți de umplutură CSS
crearea firului java
CSS oferă proprietăți pentru a specifica umplutura pentru părțile individuale ale unui element, care sunt definite după cum urmează:
- padding-top : Setează umplutura pentru partea superioară a elementului.
- umplutura-dreapta : Setează umplutura pentru partea dreaptă a elementului.
- umplutură de fund : Setează umplutura pentru partea de jos a elementului.
- padding-stânga : Setează umplutura pentru partea stângă a elementului.
Proprietățile de umplutură pot avea următoarele valori de umplutură:
- Lungimea - în cm, px, pt, etc.
- Lățimea- % lățimea elementului.
- moștenire- moștenește padding de la elementul părinte
Sintaxă:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Exemplu: Pentru a demonstra utilizarea proprietății padding în care aplicăm padding pe fiecare parte a div-ului individual.
redenumiți directorul pe LinuxHTML
Exemplu de umplutură Titlu><style>body { margin: 0; umplutură: 20px; latime: 50%; } h2 { culoare: verde; } .myDiv { culoare de fundal: albastru deschis; chenar: 2px negru solid; /* Aplicând padding pe fiecare parte individual */ padding-top: 80px; padding-dreapta: 100px; umplutură-partea inferioară: 50px; padding-stânga: 80px; } .interior { background-color: roz; chenar: 2px negru solid; latime: 70px; înălțime: 50px; display: flex; alinierea elementelor: centru; justificare-conținut: centru; } stil> cap> <body> <div> <div>Pad_Boxdiv> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="Umplutură CSS"><p>Umplutură CSS</p> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Proprietate scurtă pentru umplutură în CSS</strong> </b> </h2><p dir='ltr'><span>Proprietatea Shorthand Padding din CSS vă permite să setați umplutura pe toate laturile (sus, dreapta, jos, stânga) unui element într-o singură linie cu unele combinații, astfel încât să putem aplica cu ușurință padding elementului nostru vizat.</span></p> <p dir='ltr'> <b> <strong>Există patru cazuri când se utilizează proprietatea scurtă:</strong> </b> </p> <ol><li value='1'><span>Dacă proprietatea padding are o singură valoare.</span></li><li value='2'><span>Dacă proprietatea padding conține două valori.</span></li><li value='3'><span>Dacă proprietatea padding conține trei valori.</span></li><li value='4'><span>Dacă proprietatea padding conține patru valori.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Proprietatea de umplutură cu stenografie pentru O</span> <b> <strong>ne Valoare</strong> </b> </h3><p dir='ltr'><span>Dacă proprietatea padding are o singură valoare, atunci se aplică padding pe toate laturile unui element. De exemplu umplutură: 20px aplică 20 de pixeli de umplutură pe toate părțile în mod egal.</span></p> <h3 id='syntax-1'> <b> <strong>Sintaxă:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>Exemplu:</strong> </b> <span>Pentru a demonstra aplicarea umpluturii de 20 px pe toate părțile div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Proprietatea Padding are One Valuetitle><style>body { margin: 0; umplutură: 20px; } h2 { culoare: verde; } .myDiv { culoarea de fundal: gri; chenar: 2px negru solid; text-align: centru; latime: 40%; /* Aplică padding de 10px pe toate părțile */ padding: 20px; } .inner { inaltime: 70px; latime: 70px; culoare de fundal: roz; display: flex; alinierea elementelor: centru; justificare-conținut: centru; } stil> cap> <body> <div> <div>Paddingdiv> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="Umplutură CSS"><p>Proprietate de completare CSS cu o singură valoare.</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/mini-max-algorithm-artificial-intelligence">minim maxim</a>
</blockquote> <h2 id='padding-property-for-two-values'><span>Proprietatea de umplutură pentru T</span> <b> <strong>wo Valori</strong> </b> </h2><p dir='ltr'><span>Dacă proprietatea de umplutură conține două valori, atunci prima valoare se aplică umpluturii de sus și de jos, iar a doua valoare se aplică umpluturii din dreapta și din stânga. De exemplu – umplutură: 10px 20px, adică umplutura de sus și de jos are 10px, în timp ce umplutura de dreapta și stânga este de 20px.</span></p> <h3 id='syntax-2'> <b> <strong>Sintaxă:</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>Exemplu:</strong> </b> <span>Pentru a demonstra utilizarea unei proprietăți de umplutură cu două valori.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Proprietatea de umplutură conține două titluri de valoare><style>body { margin: 0; umplutură: 20px; } h2 { culoare: verde; } .myDiv { culoarea de fundal: gri; chenar: 2px negru solid; text-align: centru; latime: 40%; umplutură: 10px 20px; /* Aplică umplutură de 10 px în sus și în jos, 20 px la dreapta și la stânga */ } .inner { înălțime: 70px; latime: 70px; culoare de fundal: roz; } stil> cap> <body> <div> <div>Boxdiv> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="css-padding"><p>Umplutură CSS</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-static-keyword">java static</a>
</blockquote> <h3 id='padding-property-for-three-values'><span>Proprietate de umplutură pentru</span> <b> <strong>Trei Valori</strong> </b> </h3><p dir='ltr'><span>Dacă proprietatea padding conține trei valori, atunci prima valoare setează umplutura de sus, a doua valoare setează umplutura din dreapta și din stânga, iar a treia valoare setează umplutura de jos.</span></p> <p dir='ltr'><span>De exemplu – padding: 10px 20px 30px;</span></p> <ul><li value='1'><span>umplutura superioară este de 10 px</span></li><li value='2'><span>umplutura dreapta și stânga este de 20px</span></li><li value='3'><span>umplutura de jos este de 30 px</span></li></ul><h3 id='syntax-3'> <b> <strong>Sintaxă:</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>Exemplu:</strong> </b> <span>În acest exemplu, folosim padding cu trei valori.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Proprietatea de umplutură conține trei valorititle><style>body { margin: 0; umplutură: 20px; } h2 { culoare: verde; } .myDiv { culoarea de fundal: galbenverde; chenar: 2px negru solid; text-align: centru; latime: 40%; umplutură: 10px 20px 30px; /* Aplică umplutură de 10 px în partea de sus, 20 px la dreapta și la stânga, 30 px în partea de jos */ } .inner { înălțime: 70px; latime: 70px; culoare de fundal: gri; } stil> cap> <body> <div> <div>Boxdiv> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="Umplutură CSS"><p>Umplutură CSS</p> <p dir='ltr'> <br></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-are-comments-css">comentariu css</a>
</blockquote> <h2 id='padding-property-having-four-values'> <b> <strong>Proprietatea de umplutură având patru valori</strong> </b> </h2><p dir='ltr'><span>Dacă proprietatea padding conține patru valori, atunci prima valoare setează umplutura de sus, a doua valoare setează umplutura din dreapta, a treia valoare setează umplutura de jos și a patra valoare setează umplutura din stânga.:</span></p> <p dir='ltr'><span>De exemplu – padding: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>umplutura superioară este de 10 px</span></li><li value='2'><span>umplutura din dreapta este de 5 px</span></li><li value='3'><span>umplutura de jos este de 15 px</span></li><li value='4'><span>umplutura din stânga este de 20 px</span></li></ul><h3 id='syntax-4'> <b> <strong>Sintaxă:</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>Exemplu:</strong> </b> <span>Pentru a demonstra utilizarea unei proprietăți de umplutură cu patru valori.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Proprietatea de umplutură conține patru valori title><style>body { margin: 0; umplutură: 20px; } h2 { culoare: verde; } .myDiv { culoare de fundal: cyan; chenar: 2px negru solid; text-align: centru; latime: 40%; umplutură: 10px 20px 15px 25px; /* Aplică umplutură de 10 px în partea de sus, 20 px la dreapta, 15 px în jos și 25 px la stânga */ } .inner { înălțime: 70 px; latime: 70px; culoare de fundal: negru; culoare albă; display: flex; alinierea elementelor: centru; justificare-conținut: centru; } stil> cap> <body> <div> <div>Boxdiv> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="Umplutură CSS"><p>Umplutură CSS</p> <h2 id='all-css-padding-properties'><span>Toate proprietățile de umplutură CSS</span></h2><p dir='ltr'><span>Combinând proprietățile laterale individuale și proprietățile scurte, există 5 proprietăți totale ale umpluturii CSS:</span></p> <table class="table"><tbody><tr><th><span>Proprietate</span></th><th><span>Descriere</span></th></tr></tbody><tbody><tr><td> <b> <strong>căptușeală</strong> </b> </td><td><span>proprietate scurtă pentru setarea tuturor proprietăților de umplutură într-o singură declarație</span></td></tr><tr><td> <b> <strong>umplutură de fund</strong> </b> </td><td><span>Setează umplutura inferioară a unui element</span></td></tr><tr><td> <b> <strong>padding-stânga</strong> </b> </td><td><span>Setează umplutura din stânga a unui element</span></td></tr><tr><td> <b> <strong>umplutura-dreapta</strong> </b> </td><td><span>Setează umplutura corectă a unui element</span></td></tr><tr><td> <b> <strong>padding-top</strong> </b> </td><td><span>Setează umplutura superioară a unui 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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/dbms-tutorial/">Tutorial Dbms</a> </li><li> <a href="/java-operators/">Operatori Java</a> </li><li> <a href="/biology-difference-between/">Biologie-Diferenta-Intre</a> </li><li> <a href="/physics/">Fizică</a> </li><li> <a href="/dsa-tutorials/">Tutoriale Dsa</a> </li><li> <a href="/splunk-tutorial/">Tutorial Splunk</a> </li><li> <a href="/backend-development/">Dezvoltare Backend</a> </li><li> <a href="/python-pil/">Python-Pilulă</a> </li><li> <a href="/genetics/">Genetica</a> </li><li> <a href="/ds-tutorial/">Tutorial Ds</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Nu a fost găsit niciun driver adecvat pentru JDBC</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Nu s-a găsit un driver adecvat pentru JDBC cu tutorial java, caracteristici, istorie, variabile, obiect, programe, operatori, oops concept, matrice, șir, hartă, matematică, metode, exemple etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/no-suitable-driver-found"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-solve-rubiks-cube-13132">Cum să rezolvi un cub Rubik: 4 moduri diferite</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/explainer-what-is-whisper-24222">Explicator: Ce este Whisper?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-list-count-method">Metoda Python List count().</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/rpa-tutorial">Tutorial RPA</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/complete-list-high-school-classes-131684">Lista completă a claselor de liceu</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/how-find-out-my-monitor-size">care sunt dimensiunile ecranului computerului meu</a>
</li><li><a href="/chiranjeevi">actor chiranjeevi</a>
</li><li><a href="/rsa-encryption-algorithm">algoritm pentru rsa</a>
</li><li><a href="/what-is-10-10">10 din 10</a>
</li><li><a href="/string-concatenation-java">șir de caractere java concatenate</a>
</li><li><a href="/mysql-regexp_like-function">regexp_like în mysql</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 Toate Drepturile Rezervate | <a href="//ko.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>