Dopełnienie to odstęp pomiędzy treścią a zdefiniowaną krawędzią elementu. Dopełnianie polega na dodawaniu spacji wewnątrz elementu, kontrolując jego przestrzeń wewnętrzną, wpływając tym samym na jego wymiary i wygląd.
Spis treści
Dopełnienie CSS
Właściwość CSS Padding służy do tworzenia przestrzeni pomiędzy zawartością elementu a jego krawędzią. Wpływa tylko na zawartość wewnątrz elementu.
Dopełnienie CSS różni się od Margines CSS ponieważ margines to odstęp między sąsiednimi krawędziami elementu, a dopełnienie to odstęp między treścią a krawędzią elementu.
Możemy niezależnie zmieniać górne, dolne, lewe i prawe dopełnienie, korzystając z właściwości dopełnienia. Właściwości dopełnienia CSS
menu ustawień telefonu z Androidem
CSS udostępnia właściwości określające dopełnienie poszczególnych boków elementu, które są zdefiniowane w następujący sposób:
- wyściółka : Ustawia dopełnienie górnej części elementu.
- dopełnienie-prawe : Ustawia dopełnienie prawej strony elementu.
- wyściełane dno : Ustawia dopełnienie dolnej strony elementu.
- dopełnienie-lewe : Ustawia dopełnienie lewej strony elementu.
Właściwości dopełnienia mogą mieć następujące wartości dopełnienia:
- Długość - w cm, px, pt itp.
- Szerokość-% szerokości elementu.
- dziedzicz – dziedziczy dopełnienie z elementu nadrzędnego
Składnia:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Przykład: Aby zademonstrować użycie właściwości padding, w której dopełniamy każdą stronę elementu div indywidualnie.
HTML Przykładowy tytuł dopełnienia><style>treść {margines: 0; dopełnienie: 20px; szerokość: 50%; } h2 { kolor: zielony; } .myDiv { kolor tła: jasnoniebieski; obramowanie: 2 piksele w kolorze czarnym; /* Stosowanie dopełnienia indywidualnie dla każdej strony */ padding-top: 80px; dopełnienie po prawej stronie: 100px; dopełnienie-dół: 50px; dopełnienie po lewej stronie: 80px; } .inner { kolor tła: różowy; obramowanie: 2 piksele w kolorze czarnym; szerokość: 70px; wysokość: 50px; wyświetlacz: elastyczny; wyrównanie elementów: środek; justify-content: środek; } styl> głowa> <body> <div> <div>Pad_Boxdiv> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Wyjście:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="Dopełnienie CSS"><p>Dopełnienie CSS</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-block-youtube-ads-android">jak zablokować reklamy YouTube na Androidzie</a>
</blockquote> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Skrócona właściwość dopełniania w CSS</strong> </b> </h2><p dir='ltr'><span>Skrócona właściwość dopełnienia w CSS pozwala ustawić dopełnienie ze wszystkich stron (góra, prawa, dół, lewa) elementu w jednej linii w niektórych kombinacjach, dzięki czemu możemy łatwo zastosować dopełnienie do docelowego elementu.</span></p> <p dir='ltr'> <b> <strong>Istnieją cztery przypadki używania własności skróconej:</strong> </b> </p> <ol><li value='1'><span>Jeśli właściwość dopełnienia ma jedną wartość.</span></li><li value='2'><span>Jeśli właściwość dopełnienia zawiera dwie wartości.</span></li><li value='3'><span>Jeśli właściwość dopełnienia zawiera trzy wartości.</span></li><li value='4'><span>Jeśli właściwość dopełnienia zawiera cztery wartości.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Skrócona właściwość dopełnienia dla O</span> <b> <strong>nie Wartość</strong> </b> </h3><p dir='ltr'><span>Jeśli właściwość padding ma jedną wartość, wówczas stosuje dopełnienie do wszystkich stron elementu. Na przykład dopełnienie: 20px powoduje zastosowanie 20 pikseli dopełnienia równomiernie ze wszystkich stron.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-long">ciąg za długi</a>
</blockquote> <h3 id='syntax-1'> <b> <strong>Składnia:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>Przykład:</strong> </b> <span>Aby zademonstrować zastosowanie dopełnienia 20 pikseli do wszystkich stron elementu div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Właściwość dopełnienia ma jedną wartość><style>treść {margines: 0; dopełnienie: 20px; } h2 { kolor: zielony; } .myDiv { kolor tła: szary; obramowanie: 2 piksele w kolorze czarnym; wyrównanie tekstu: do środka; szerokość: 40%; /* Stosuje dopełnienie 10px ze wszystkich stron */ dopełnienie: 20px; } .inner { wysokość: 70px; szerokość: 70px; kolor tła: różowy; wyświetlacz: elastyczny; wyrównanie elementów: środek; justify-content: środek; } styl> głowa> <body> <div> <div>Paddingdiv> div> treść> html>></pre> </code> <p dir='ltr'> <b> <strong>Wyjście:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="Dopełnienie CSS"><p>Właściwość dopełnienia CSS z jedną wartością.</p> <h2 id='padding-property-for-two-values'><span>Właściwość dopełnienia dla T</span> <b> <strong>wo Wartości</strong> </b> </h2><p dir='ltr'><span>Jeśli właściwość padding zawiera dwie wartości, wówczas pierwsza wartość dotyczy górnego i dolnego dopełnienia, a druga wartość dotyczy prawego i lewego dopełnienia. Na przykład – dopełnienie: 10px 20px, tj. górne i dolne dopełnienie wynosi 10px, a prawe i lewe dopełnienie wynosi 20px.</span></p> <h3 id='syntax-2'> <b> <strong>Składnia:</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>Przykład:</strong> </b> <span>Aby zademonstrować użycie właściwości dopełnienia z dwiema wartościami.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Właściwość dopełnienia zawiera dwie wartości: tytuł><style>treść {margines: 0; dopełnienie: 20px; } h2 { kolor: zielony; } .myDiv { kolor tła: szary; obramowanie: 2 piksele w kolorze czarnym; wyrównanie tekstu: do środka; szerokość: 40%; dopełnienie: 10px 20px; /* Stosuje dopełnienie 10 pikseli na górze i na dole oraz 20 pikseli po prawej i lewej stronie */ } .inner { height: 70px; szerokość: 70px; kolor tła: różowy; } styl> głowa> <body> <div> <div>Boxdiv> div> treść> html>></pre> </code> <p dir='ltr'> <b> <strong>Wyjście:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="dopełnienie CSS"><p>Dopełnienie CSS</p> <h3 id='padding-property-for-three-values'><span>Właściwość dopełnienia dla</span> <b> <strong>Trzy wartości</strong> </b> </h3><p dir='ltr'><span>Jeśli właściwość padding zawiera trzy wartości, wówczas pierwsza wartość ustawia górne wypełnienie, druga wartość ustawia prawe i lewe wypełnienie, a trzecia wartość ustawia dolne wypełnienie.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/types-sql-join">złączenia i rodzaje złączy</a>
</blockquote> <p dir='ltr'><span>Na przykład – dopełnienie: 10px 20px 30px;</span></p> <ul><li value='1'><span>górne wypełnienie wynosi 10 pikseli</span></li><li value='2'><span>prawe i lewe dopełnienie wynosi 20 pikseli</span></li><li value='3'><span>dolne wypełnienie wynosi 30 pikseli</span></li></ul><h3 id='syntax-3'> <b> <strong>Składnia:</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>Przykład:</strong> </b> <span>W tym przykładzie używamy dopełnienia trzema wartościami.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Właściwość dopełnienia zawiera trzy wartoścititle><style>treść {margines: 0; dopełnienie: 20px; } h2 { kolor: zielony; } .myDiv { kolor tła: żółtozielony; obramowanie: 2 piksele w kolorze czarnym; wyrównanie tekstu: do środka; szerokość: 40%; dopełnienie: 10px 20px 30px; /* Stosuje dopełnienie 10 pikseli na górze, 20 pikseli po prawej i lewej stronie, 30 pikseli dopełnienia na dole */ } .inner { height: 70px; szerokość: 70px; kolor tła: szary; } styl> głowa> <body> <div> <div>Boxdiv> div> treść> html>></pre> </code> <p dir='ltr'> <b> <strong>Wyjście:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="Dopełnienie CSS"><p>Dopełnienie CSS</p> <p dir='ltr'> <br></p> <h2 id='padding-property-having-four-values'> <b> <strong>Właściwość dopełnienia mająca cztery wartości</strong> </b> </h2><p dir='ltr'><span>Jeśli właściwość padding zawiera cztery wartości, wówczas pierwsza wartość ustawia górne dopełnienie, druga wartość ustawia prawe dopełnienie, trzecia wartość ustawia dolne dopełnienie, a czwarta wartość ustawia lewe dopełnienie.:</span></p> <p dir='ltr'><span>Na przykład – dopełnienie: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>górne wypełnienie wynosi 10 pikseli</span></li><li value='2'><span>prawe wypełnienie wynosi 5 pikseli</span></li><li value='3'><span>dolne wypełnienie wynosi 15 pikseli</span></li><li value='4'><span>lewe dopełnienie wynosi 20 pikseli</span></li></ul><h3 id='syntax-4'> <b> <strong>Składnia:</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>Przykład:</strong> </b> <span>Aby zademonstrować użycie właściwości dopełnienia z czterema wartościami.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/insertion-sort-python">wstawianie Pythona</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Właściwość dopełnienia zawiera cztery wartoścititle><style>treść {margines: 0; dopełnienie: 20px; } h2 { kolor: zielony; } .myDiv { kolor tła: cyjan; obramowanie: 2 piksele w kolorze czarnym; wyrównanie tekstu: do środka; szerokość: 40%; dopełnienie: 10px 20px 15px 25px; /* Stosuje dopełnienie 10 pikseli na górze, 20 pikseli na prawo, 15 pikseli na dole i 25 pikseli w lewo */ } .inner { height: 70px; szerokość: 70px; kolor tła: czarny; kolor biały; wyświetlacz: elastyczny; wyrównanie elementów: środek; justify-content: środek; } styl> głowa> <body> <div> <div>Boxdiv> div> treść> html>></pre> </code> <p dir='ltr'> <b> <strong>Wyjście:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="Dopełnienie CSS"><p>Dopełnienie CSS</p> <h2 id='all-css-padding-properties'><span>Wszystkie właściwości dopełnienia CSS</span></h2><p dir='ltr'><span>Łącząc indywidualne właściwości boczne i właściwości skrócone, istnieje 5 całkowitych właściwości dopełnienia CSS:</span></p> <table class="table"><tbody><tr><th><span>Nieruchomość</span></th><th><span>Opis</span></th></tr></tbody><tbody><tr><td> <b> <strong>wyściółka</strong> </b> </td><td><span>skrócona właściwość do ustawiania wszystkich właściwości dopełnienia w jednej deklaracji</span></td></tr><tr><td> <b> <strong>wyściełane dno</strong> </b> </td><td><span>Ustawia dolne wypełnienie elementu</span></td></tr><tr><td> <b> <strong>dopełnienie-lewe</strong> </b> </td><td><span>Ustawia lewe dopełnienie elementu</span></td></tr><tr><td> <b> <strong>dopełnienie-prawe</strong> </b> </td><td><span>Ustawia odpowiednie wypełnienie elementu</span></td></tr><tr><td> <b> <strong>wyściółka</strong> </b> </td><td><span>Ustawia górne wypełnienie elementu</span></td></tr></tbody></table> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="">Kategoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-drivermanager/">Menedżer Sterowników Java</a> </li><li> <a href="/ecology/">Ekologia</a> </li><li> <a href="/java-exceptions/">Wyjątki Java</a> </li><li> <a href="/yaml-tutorial/">Samouczek Yaml</a> </li><li> <a href="/bit-magic/">Trochę magii</a> </li><li> <a href="/java-constructors/">Konstruktory Java</a> </li><li> <a href="/randomized/">Randomizowane</a> </li><li> <a href="/python-data-type/">Typ Danych Pythona</a> </li><li> <a href="/python-pil/">Pigułka Pythona</a> </li><li> <a href="/net-framework/">.Net Framework</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Java-Jsp</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java-Jsp</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-jsp/"> <i class="fa fa-external-link"></i> Czytaj Więcej</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Ciekawe Artykuły</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/python-modules/">Moduły Pythona</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/graph-theory-tutorial/">Samouczek Z Teorii Grafów</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/recursion-tree-method">Metoda drzewa rekurencji</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/replace-function-sql">Funkcja ZAMIEŃ w SQL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/whats-lowest-sat-score-possible-131814">Jaki jest najniższy możliwy wynik SAT? Ilu to dostaje?</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">Popularne Wiadomości</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-char-int">Java konwertuje znak na int</a>
</li><li><a href="/lion-vs-tiger">„jaka” jest różnica między lwem a tygrysem</a>
</li><li><a href="/git-push">polecenia git dla push</a>
</li><li><a href="/binary-tree-vs-binary-search-tree">drzewo binarne vs bst</a>
</li><li><a href="/c-string-find">znajdź w ciągu C++</a>
</li><li><a href="/java-if-else-statement">jeśli inaczej, jeśli inaczej, jeśli Java</a>
</li><li><a href="/lion-vs-tiger">porównanie lwa i tygrysa</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 Wszelkie Prawa Zastrzeżone | <a href="//uk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zastrzeżenie</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nas</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Polityka Prywatności</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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>