logo

TechCodeview

Imbottitura CSS

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

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="/celebrity/">Celebrità</a> </li><li> <a href="/linux-basic-commands/">Comandi Di Base Di Linux</a> </li><li> <a href="/photoshop-tutorial/">Tutorial Di Photoshop</a> </li><li> <a href="/pyspark-tutorial/">Tutorial Su Pyspark</a> </li><li> <a href="/linux-commands/">Comandi Di Linux</a> </li><li> <a href="/cpp-examples/">Esempi Di Cpp</a> </li><li> <a href="/dsa/">DSA</a> </li><li> <a href="/html-attributes/">Attributi Html</a> </li><li> <a href="/graph-theory-tutorial/">Tutorial Sulla Teoria Dei Grafici</a> </li><li> <a href="/geometry-maq/">Geometria - Maq</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">Differenza tra controllo numerico (NC) e controllo numerico computerizzato (CNC)</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Differenza tra controllo numerico (NC) e controllo numerico computerizzato (CNC) con elenco delle principali differenze ed esempi in tempo reale tra cui immagini, cane, gatto, lordo, netto, Java, database, scienza, generale, inglese ecc.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/difference-between-numerical-control"> <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="/what-is-short-int-c">Cos'è l'int breve in C?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/generating-random-numbers-in-java">Generazione di numeri casuali in Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/which-is-bigger-3-8">Qual è più grande 3/8 o 1/4?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/most-important-themes-crucible-1311488">Temi più importanti in The Crucible, analizzati</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/explained-what-is-snap-map-242116">Spiegazione: cos'è Snap Map?</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="/jquery-click">jquery questo clic</a>
</li><li><a href="/java-string-valueof">valore stringa di</a>
</li><li><a href="/difference-between-firm">azienda vs azienda</a>
</li><li><a href="/how-convert-string-json-object-java">convertire la stringa in oggetto json</a>
</li><li><a href="/alya-manasa">alya manasa</a>
</li><li><a href="/agents-artificial-intelligence">intelligenza artificiale e agenti intelligenti</a>
</li><li><a href="/java-convert-int-string">conversione di int in stringa in Java</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="//da.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>
	
</body>
</html>