Il riempimento è lo spazio tra il contenuto e il bordo definito di un elemento. Imbottire significa aggiungere spazi all'interno dell'elemento, controllarne lo spazio interno, influenzandone così le dimensioni e l'aspetto.
Tabella dei contenuti
- Imbottitura CSS
- Proprietà abbreviata per il riempimento nei CSS
- Tutte le proprietà di riempimento CSS
Imbottitura CSS
La proprietà Padding CSS viene utilizzata per creare spazio tra il contenuto dell'elemento e il bordo dell'elemento. Colpisce solo il contenuto all'interno dell'elemento.
Il riempimento CSS è diverso da Margine CSS poiché il margine è lo spazio tra i bordi dell'elemento adiacente e il riempimento è lo spazio tra il contenuto e il bordo dell'elemento.
Possiamo modificare in modo indipendente il riempimento superiore, inferiore, sinistro e destro utilizzando le proprietà di riempimento. Proprietà di riempimento CSS
creazione del thread Java
I CSS forniscono proprietà per specificare il riempimento per i singoli lati di un elemento definiti come segue:
- parte superiore imbottita : Imposta la spaziatura interna per il lato superiore dell'elemento.
- imbottitura a destra : Imposta il riempimento per il lato destro dell'elemento.
- fondo imbottito : Imposta la spaziatura interna per il lato inferiore dell'elemento.
- imbottitura-sinistra : Imposta il riempimento per il lato sinistro dell'elemento.
Le proprietà di riempimento possono avere i seguenti valori di riempimento:
- Lunghezza: in cm, px, pt, ecc.
- Larghezza-% larghezza dell'elemento.
- eredita- eredita il riempimento dall'elemento genitore
Sintassi:
/* Applying padding to each side individually */ .myDiv { padding-top: 80px; padding-right: 100px; padding-bottom: 50px; padding-left: 80px; }>Esempio: Per dimostrare l'utilizzo della proprietà di riempimento in cui applichiamo il riempimento a ciascun lato del div individualmente.
HTML Titolo di esempio di riempimento><style>corpo {margine: 0; imbottitura: 20px; larghezza: 50%; } h2 { colore: verde; } .myDiv { colore di sfondo: azzurro; bordo: 2px nero pieno; /* Applicazione del riempimento su ciascun lato individualmente */ imbottitura-top: 80px; imbottitura a destra: 100px; fondo imbottito: 50px; imbottitura sinistra: 80px; } .inner { colore di sfondo: rosa; bordo: 2px nero pieno; larghezza: 70px; altezza: 50px; display: flessibile; allineare gli elementi: centro; giustifica-contenuto: centro; } stile> testa> <body> <div> <div>Pad_Boxdiv> div> corpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="Imbottitura CSS"><p>Imbottitura CSS</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/c-pointers">puntatori in c</a>
</blockquote> <p dir='ltr'> <br></p> <h2 id='shorthand-property-for-padding-in-css'> <b> <strong>Proprietà abbreviata per il riempimento nei CSS</strong> </b> </h2><p dir='ltr'><span>La proprietà Shorthand Padding nei CSS ti consente di impostare il riempimento su tutti i lati (in alto, a destra, in basso, a sinistra) di un elemento in una singola riga con alcune combinazioni, in modo da poter applicare facilmente il riempimento al nostro elemento di destinazione.</span></p> <p dir='ltr'> <b> <strong>Ci sono quattro casi durante l'utilizzo della proprietà abbreviata:</strong> </b> </p> <ol><li value='1'><span>Se la proprietà di riempimento ha un valore.</span></li><li value='2'><span>Se la proprietà riempimento contiene due valori.</span></li><li value='3'><span>Se la proprietà riempimento contiene tre valori.</span></li><li value='4'><span>Se la proprietà riempimento contiene quattro valori.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'> <b> <strong>CSS</strong> </b> <span>Proprietà di riempimento abbreviato per O</span> <b> <strong>ne Valore</strong> </b> </h3><p dir='ltr'><span>Se la proprietà di riempimento ha un valore, applica il riempimento a tutti i lati di un elemento. Ad esempio il riempimento: 20px applica 20 pixel di riempimento su tutti i lati equamente.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/c-pointers">puntatore in c</a>
</blockquote> <h3 id='syntax-1'> <b> <strong>Sintassi:</strong> </b> </h3><pre class='hljs'>.element { /* Applies 20px padding to all sides */ padding: 20px; }></pre><p dir='ltr'> <b> <strong>Esempio:</strong> </b> <span>Per dimostrare l'applicazione del riempimento di 20px su tutti i lati del div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La proprietà Padding ha un valoretitle><style>corpo {margine: 0; imbottitura: 20px; } h2 { colore: verde; } .myDiv { colore di sfondo: grigio; bordo: 2px nero pieno; allineamento testo: centro; larghezza: 40%; /* Applica un riempimento di 10px a tutti i lati */ riempimento: 20px; } .inner { altezza: 70px; larghezza: 70px; colore di sfondo: rosa; display: flessibile; allineare gli elementi: centro; giustifica-contenuto: centro; } stile> testa> <body> <div> <div>Paddingdiv> div> corpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="Imbottitura CSS"><p>Proprietà di riempimento CSS con un valore.</p> <h2 id='padding-property-for-two-values'><span>Proprietà di riempimento per T</span> <b> <strong>due valori</strong> </b> </h2><p dir='ltr'><span>Se la proprietà di riempimento contiene due valori, il primo valore si applica al riempimento superiore e inferiore e il secondo valore si applica al riempimento destro e sinistro. Ad esempio: imbottitura: 10px 20px, ovvero l'imbottitura superiore e inferiore sono 10px mentre l'imbottitura destra e sinistra è 20px.</span></p> <h3 id='syntax-2'> <b> <strong>Sintassi:</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>Esempio:</strong> </b> <span>Per dimostrare l'utilizzo di una proprietà di riempimento con due valori.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La proprietà Padding contiene due Valuetitle><style>corpo {margine: 0; imbottitura: 20px; } h2 { colore: verde; } .myDiv { colore di sfondo: grigio; bordo: 2px nero pieno; allineamento testo: centro; larghezza: 40%; imbottitura: 10px 20px; /* Applica il riempimento di 10px in alto e in basso, il riempimento di 20px a destra e a sinistra */ } .inner { altezza: 70px; larghezza: 70px; colore di sfondo: rosa; } stile> testa> <body> <div> <div>Boxdiv> div> corpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="imbottitura CSS"><p>Imbottitura CSS</p> <h3 id='padding-property-for-three-values'><span>Proprietà di riempimento per</span> <b> <strong>Tre valori</strong> </b> </h3><p dir='ltr'><span>Se la proprietà riempimento contiene tre valori, il primo valore imposta il riempimento superiore, il secondo valore imposta il riempimento destro e sinistro e il terzo valore imposta il riempimento inferiore.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/fiscal-quarters-q1-q2">trimestre di attività</a>
</blockquote> <p dir='ltr'><span>Ad esempio: imbottitura: 10px 20px 30px;</span></p> <ul><li value='1'><span>l'imbottitura superiore è 10px</span></li><li value='2'><span>L'imbottitura destra e sinistra è di 20px</span></li><li value='3'><span>l'imbottitura inferiore è 30px</span></li></ul><h3 id='syntax-3'> <b> <strong>Sintassi:</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>Esempio:</strong> </b> <span>In questo esempio, stiamo utilizzando il riempimento con tre valori.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La proprietà Padding contiene tre valorititle><style>corpo {margine: 0; imbottitura: 20px; } h2 { colore: verde; } .myDiv { colore di sfondo: gialloverde; bordo: 2px nero pieno; allineamento testo: centro; larghezza: 40%; imbottitura: 10px 20px 30px; /* Applica il riempimento di 10px in alto, il riempimento di 20px a destra e sinistra, il riempimento di 30px in basso */ } .inner { altezza: 70px; larghezza: 70px; colore di sfondo: grigio; } stile> testa> <body> <div> <div>Boxdiv> div> corpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="Imbottitura CSS"><p>Imbottitura CSS</p> <p dir='ltr'> <br></p> <h2 id='padding-property-having-four-values'> <b> <strong>Proprietà di riempimento con quattro valori</strong> </b> </h2><p dir='ltr'><span>Se la proprietà imbottitura contiene quattro valori, il primo valore imposta l'imbottitura superiore, il secondo valore imposta l'imbottitura destra, il terzo valore imposta l'imbottitura inferiore e il quarto valore imposta l'imbottitura sinistra.:</span></p> <p dir='ltr'><span>Ad esempio: imbottitura: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>l'imbottitura superiore è 10px</span></li><li value='2'><span>l'imbottitura destra è 5px</span></li><li value='3'><span>l'imbottitura inferiore è di 15 px</span></li><li value='4'><span>l'imbottitura sinistra è 20px</span></li></ul><h3 id='syntax-4'> <b> <strong>Sintassi:</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>Esempio:</strong> </b> <span>Per dimostrare l'utilizzo di una proprietà di riempimento con quattro valori.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/android-versions">versioni Android</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La proprietà Padding contiene quattro valorititle><style>corpo {margine: 0; imbottitura: 20px; } h2 { colore: verde; } .myDiv { colore di sfondo: ciano; bordo: 2px nero pieno; allineamento testo: centro; larghezza: 40%; imbottitura: 10px 20px 15px 25px; /* Applica il riempimento di 10px in alto, il riempimento di 20px a destra, il riempimento di 15px in basso e il riempimento di 25px a sinistra */ } .inner { altezza: 70px; larghezza: 70px; colore di sfondo: nero; colore bianco; display: flessibile; allineare gli elementi: centro; giustifica-contenuto: centro; } stile> testa> <body> <div> <div>Boxdiv> div> corpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="Imbottitura CSS"><p>Imbottitura CSS</p> <h2 id='all-css-padding-properties'><span>Tutte le proprietà di riempimento CSS</span></h2><p dir='ltr'><span>Combinando le proprietà laterali individuali e le proprietà abbreviate, ci sono 5 proprietà totali del riempimento CSS:</span></p> <table class="table"><tbody><tr><th><span>Proprietà</span></th><th><span>Descrizione</span></th></tr></tbody><tbody><tr><td> <b> <strong>imbottitura</strong> </b> </td><td><span>proprietà abbreviata per impostare tutte le proprietà di riempimento in una dichiarazione</span></td></tr><tr><td> <b> <strong>fondo imbottito</strong> </b> </td><td><span>Imposta il riempimento inferiore di un elemento</span></td></tr><tr><td> <b> <strong>imbottitura-sinistra</strong> </b> </td><td><span>Imposta il riempimento sinistro di un elemento</span></td></tr><tr><td> <b> <strong>imbottitura a destra</strong> </b> </td><td><span>Imposta il corretto riempimento di un elemento</span></td></tr><tr><td> <b> <strong>parte superiore imbottita</strong> </b> </td><td><span>Imposta il riempimento superiore di un elemento</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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/excel-formulas/">Formule Di Excel</a> </li><li> <a href="/roman-numerals/">Numeri Romani</a> </li><li> <a href="/unity-tutorial/">Tutorial Sull'unità</a> </li><li> <a href="/java-collections/">Collezioni Java</a> </li><li> <a href="/dsa-tutorials/">Tutorial Dsa</a> </li><li> <a href="/java-servlet/">Servlet Java</a> </li><li> <a href="/arduino-tutorial/">Tutorial Su Arduino</a> </li><li> <a href="/artificial-neural-network/">Rete Neurale Artificiale</a> </li><li> <a href="/minecraft-guide/">Guida Di Minecraft</a> </li><li> <a href="/alternatives/">Alternative</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">Sincronizzazione Dei Processi</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Sincronizzazione Dei Processi</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/process-synchronization/"> <i class="fa fa-external-link"></i> Per Saperne Di Più</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articoli Interessanti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/strdup-function-c">Funzione strdup() in C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-meshgrid-function">Funzione Numpy Meshgrid</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/is-sat-hard-expert-analysis-8-key-factors-131770">Il SAT è difficile? Analisi esperta di 8 fattori chiave</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-python">Differenza tra Python e Anaconda</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/converting-number-string-c">Conversione di numeri in stringhe in C++</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">Messaggi Popolari</h2>
<div class="content">
<ul class="list"> <li><a href="/linux-task-manager">gestore attività linux</a>
</li><li><a href="/an-array-strings-c">array di stringhe in c</a>
</li><li><a href="/what-is-windows-desktop">cos'è desktop.ini</a>
</li><li><a href="/what-is-nginx">nginx</a>
</li><li><a href="/java-string-compareto">confronto delle stringhe</a>
</li><li><a href="/an-array-strings-c">c stringa nell'array</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 Tutti I Diritti Riservati | <a href="//pl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza</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>