ENCOIXINAT CSS

El farciment és l'espai entre el contingut i la vora definida d'un element. El farciment significa afegir espais dins de l'element, controlar-ne l'espai intern, afectant així les seves dimensions i aspecte.

Taula de contingut

Encoixinat CSS
Propietat de taquigrafia per a farciment en CSS
Totes les propietats de farciment CSS

La propietat CSS Padding s'utilitza per crear espai entre el contingut de l'element i la vora de l'element. Només afecta el contingut de l'element.

El farciment CSS és diferent de Marge CSS ja que el marge és l'espai entre les vores de l'element adjacent i el farciment és l'espai entre el contingut i la vora de l'element.

Podem canviar de manera independent el farciment superior, inferior, esquerre i dret mitjançant les propietats de farciment. Propietats de farciment CSS

corda invertida en c

CSS proporciona propietats per especificar el farciment per als costats individuals d'un element que es defineixen de la següent manera:

encoixinat-parte superior : Estableix el farciment per a la part superior de l'element.
farciment-dreta : Estableix el farciment per al costat dret de l'element.
encoixinat-baix : Estableix el farciment per a la part inferior de l'element.
farciment-esquerra : Estableix el farciment per al costat esquerre de l'element.

Les propietats de farciment poden tenir els valors de farciment següents:

Longitud: en cm, px, pt, etc.
Amplada: % d'amplada de l'element.
hereta: hereta el farciment de l'element pare

Sintaxi:

/* Applying padding to each side individually */ .myDiv {  padding-top: 80px;  padding-right: 100px;  padding-bottom: 50px;  padding-left: 80px; }>

Exemple: Per demostrar l'ús de la propietat de farciment en què apliquem el farciment a cada costat del div individualment.

HTML

    Exemple de farciment de títol><style>cos { marge: 0;  farciment: 20px;  amplada: 50%;  } h2 { color: verd;  } .myDiv { color de fons: blau clar;  vora: 2px negre sòlid;  /* Aplicant el farciment a cada costat individualment */ padding-top: 80px;  farciment-dreta: 100px;  farciment inferior: 50px;  farciment-esquerra: 80px;  } .interior { color de fons: rosa;  vora: 2px negre sòlid;  amplada: 70 píxels;  alçada: 50px;  pantalla: flex;  alinear elements: centre;  justificar-contingut: centre;  } estil> cap> <body> <div> <div>Pad_Boxdiv> div> body> html>>></pre> </code> <p dir='ltr'>  <b>  <strong>Sortida:</strong>  </b>  </p>  <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="farciment CSS"><p>Encoixinat CSS</p> <p dir='ltr'>  <br></p> <h2 id='shorthand-property-for-padding-in-css'>  <b>  <strong>Propietat de taquigrafia per a farciment en CSS</strong>  </b>  </h2><p dir='ltr'><span>La propietat de farciment de taquigrafía en CSS us permet establir el farciment a tots els costats (superior, dret, inferior, esquerre) d'un element en una sola línia amb algunes combinacions, de manera que podem aplicar fàcilment el farciment al nostre element objectiu.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string">mètodes de cadena</a>
</blockquote> <p dir='ltr'>  <b>  <strong>Hi ha quatre casos quan s'utilitza la propietat taquigràfica:</strong>  </b>  </p> <ol><li value='1'><span>Si la propietat de farciment té un valor.</span></li><li value='2'><span>Si la propietat de farciment conté dos valors.</span></li><li value='3'><span>Si la propietat de farciment conté tres valors.</span></li><li value='4'><span>Si la propietat de farciment conté quatre valors.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'>  <b>  <strong>CSS</strong>  </b>  <span>Propietat de farciment de taquigrafia per a O</span>  <b>  <strong>ne Valor</strong>  </b>  </h3><p dir='ltr'><span>Si la propietat de farciment té un valor, s'aplica el farciment a tots els costats d'un element. Per exemple, farciment: 20px aplica 20 píxels de farciment a tots els costats per igual.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/steps-write-execute-script">fer que l'script de shell sigui executable</a>
</blockquote> <h3 id='syntax-1'>  <b>  <strong>Sintaxi:</strong>  </b>  </h3><pre class='hljs'>.element {  /* Applies 20px padding to all sides */  padding: 20px; }></pre><p dir='ltr'>  <b>  <strong>Exemple:</strong>  </b>  <span>Per demostrar l'aplicació del farciment de 20 píxels a tots els costats de div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La propietat de farciment té un títol de valor><style>cos { marge: 0;  farciment: 20px;  } h2 { color: verd;  } .myDiv { color de fons: gris;  vora: 2px negre sòlid;  alineació de text: centre;  amplada: 40%;  /* Aplica un farciment de 10 píxels a tots els costats */ padding: 20px;  } .interior { alçada: 70px;  amplada: 70 píxels;  color de fons: rosa;  pantalla: flex;  alinear elements: centre;  justificar-contingut: centre;  } estil> cap> <body> <div> <div>Paddingdiv> div> cos> html>>></pre> </code> <p dir='ltr'>  <b>  <strong>Sortida:</strong>  </b>  </p>  <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="farciment CSS"><p>Propietat de farciment CSS amb un valor.</p> <h2 id='padding-property-for-two-values'><span>Propietat de farciment per a T</span>  <b>  <strong>wo Valors</strong>  </b>  </h2><p dir='ltr'><span>Si la propietat de farciment conté dos valors, el primer valor s'aplica al farciment superior i inferior, i el segon valor s'aplica al farciment dret i esquerre. Per exemple: farciment: 10px 20px, és a dir, el farciment superior i inferior són 10px, mentre que el farciment dret i esquerre és de 20px.</span></p> <h3 id='syntax-2'>  <b>  <strong>Sintaxi:</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>Exemple:</strong>  </b>  <span>Per demostrar l'ús d'una propietat de farciment amb dos valors.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La propietat de farciment conté dos valors><style>cos { marge: 0;  farciment: 20px;  } h2 { color: verd;  } .myDiv { color de fons: gris;  vora: 2px negre sòlid;  alineació de text: centre;  amplada: 40%;  farciment: 10px 20px;  /* Aplica un farciment de 10 px a la part superior i inferior, 20 px a la dreta i a l'esquerra */ } .inner { alçada: 70 px;  amplada: 70 píxels;  color de fons: rosa;  } estil> cap> <body> <div> <div>Boxdiv> div> cos> html>>></pre> </code> <p dir='ltr'>  <b>  <strong>Sortida:</strong>  </b>  </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-many-weeks-month">quantes setmanes al mes</a>
</blockquote>  <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="farcit de css"><p>farciment CSS</p> <h3 id='padding-property-for-three-values'><span>Propietat de farciment per a</span>  <b>  <strong>Tres Valors</strong>  </b>  </h3><p dir='ltr'><span>Si la propietat de farciment conté tres valors, el primer valor estableix el farciment superior, el segon valor el farciment dret i esquerre i el tercer valor el farciment inferior.</span></p> <p dir='ltr'><span>Per exemple: farciment: 10px 20px 30px;</span></p> <ul><li value='1'><span>el farciment superior és de 10 píxels</span></li><li value='2'><span>el farciment dret i esquerre és de 20 píxels</span></li><li value='3'><span>el farciment inferior és de 30 píxels</span></li></ul><h3 id='syntax-3'>  <b>  <strong>Sintaxi:</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>Exemple:</strong>  </b>  <span>En aquest exemple, estem utilitzant el farciment amb tres valors.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La propietat de farciment conté tres valorstitle><style>cos { marge: 0;  farciment: 20px;  } h2 { color: verd;  } .myDiv { color de fons: groc verd;  vora: 2px negre sòlid;  alineació de text: centre;  amplada: 40%;  farciment: 10px 20px 30px;  /* Aplica un farciment de 10 px a la part superior, un farciment de 20 px a la dreta i a l'esquerra, un farciment de 30 px a la part inferior */ } .inner { alçada: 70 px;  amplada: 70 píxels;  color de fons: gris;  } estil> cap> <body> <div> <div>Boxdiv> div> cos> html>>></pre> </code> <p dir='ltr'>  <b>  <strong>Sortida:</strong>  </b>  </p>  <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="farciment CSS"><p>farciment CSS</p> <p dir='ltr'>  <br></p> <h2 id='padding-property-having-four-values'>  <b>  <strong>Propietat de farciment que té quatre valors</strong>  </b>  </h2><p dir='ltr'><span>Si la propietat de farciment conté quatre valors, el primer valor estableix el farciment superior, el segon valor el farciment dret, el tercer valor el farciment inferior i el quart valor el farciment esquerre.</span></p> <p dir='ltr'><span>Per exemple: farciment: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>el farciment superior és de 10 píxels</span></li><li value='2'><span>el farciment dret és de 5 píxels</span></li><li value='3'><span>el farciment inferior és de 15 píxels</span></li><li value='4'><span>el farciment esquerre és de 20 píxels</span></li></ul><h3 id='syntax-4'>  <b>  <strong>Sintaxi:</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>Exemple:</strong>  </b>  <span>Per demostrar l'ús d'una propietat de farciment amb quatre valors.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-reverse-string-java">java invertint una cadena</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>La propietat de farciment conté quatre valorstitle><style>cos { marge: 0;  farciment: 20px;  } h2 { color: verd;  } .myDiv { color de fons: cian;  vora: 2px negre sòlid;  alineació de text: centre;  amplada: 40%;  farciment: 10px 20px 15px 25px;  /* Aplica un farciment de 10 píxels a la part superior, un farciment de 20 píxels a la dreta, un farciment de 15 píxels a la part inferior i un farciment de 25 píxels a l'esquerra */ } .inner { alçada: 70 píxels;  amplada: 70 píxels;  color de fons: negre;  color: blanc;  pantalla: flex;  alinear elements: centre;  justificar-contingut: centre;  } estil> cap> <body> <div> <div>Boxdiv> div> cos> html>>></pre> </code> <p dir='ltr'>  <b>  <strong>Sortida:</strong>  </b>  </p>  <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="farciment CSS"><p>farciment CSS</p> <h2 id='all-css-padding-properties'><span>Totes les propietats de farciment CSS</span></h2><p dir='ltr'><span>Combinant propietats laterals individuals i propietats abreviades, hi ha 5 propietats totals del farciment CSS:</span></p> <table class="table"><tbody><tr><th><span>Propietat</span></th><th><span>Descripció</span></th></tr></tbody><tbody><tr><td>  <b>  <strong>farciment</strong>  </b>  </td><td><span>propietat d'abreviatura per establir totes les propietats de farciment en una declaració</span></td></tr><tr><td>  <b>  <strong>encoixinat-baix</strong>  </b>  </td><td><span>Estableix el farciment inferior d'un element</span></td></tr><tr><td>  <b>  <strong>farciment-esquerra</strong>  </b>  </td><td><span>Estableix el farciment esquerre d'un element</span></td></tr><tr><td>  <b>  <strong>farciment-dreta</strong>  </b>  </td><td><span>Estableix el farciment correcte d'un element</span></td></tr><tr><td>  <b>  <strong>encoixinat-parte superior</strong>  </b>  </td><td><span>Estableix el farciment superior d'un 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="">Categoria</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/ios-development/">Desenvolupament Ios</a> </li><li> <a href="/c-data-types/">C-Tipus De Dades</a> </li><li> <a href="/acids-bases-salts/">Àcids, Bases I Sals</a> </li><li> <a href="/kinematics/">Cinemàtica</a> </li><li> <a href="/java-object-oriented/">Java Orientat A Objectes</a> </li><li> <a href="/java-instant-class/">Classe Instantània De Java</a> </li><li> <a href="/top-10-list-world/">Llista Dels 10 Millors - Món</a> </li><li> <a href="/svn-tutorial/">Tutorial Svn</a> </li><li> <a href="/dbms/">Dbms</a> </li><li> <a href="/circular-linked-list/">Llista Enllaçada Circular</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Funció JavaScript Endswith().</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> JavaScript Endswith() Funció amb tutorial de javascript, introducció, javascript oops, aplicació de javascript, bucle, variable, objectes, mapa, typedarray, etc.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/javascript-endswith-function"> <i class="fa fa-external-link"></i> Llegir Més</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Articles D'Interès</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/indexing-selecting-data-with-pandas">Indexació i selecció de dades amb Pandas</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/how-convert-char-array-string-java">Com convertir Char Array en String a Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/scanner-nextline-method-java-with-examples">Escàner mètode nextLine() a Java amb exemples</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/write-3-4-divided-2-fraction">Escriu 3/4 dividit per 2 en fracció.</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/java-program-check-whether-string-is-palindrome">Programa Java per comprovar si una cadena és un Palíndrom</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">Entrades Populars</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/kylie-jenner">edat de kylie jenner</a>
</li><li><a href="/java-convert-string-int">convertir una cadena en un enter</a>
</li><li><a href="/collections-java">marc de col·lecció java</a>
</li><li><a href="/java-convert-string-int">cadena a int</a>
</li><li><a href="/dfa">exemples dfa</a>
</li><li><a href="/jvm-architecture">jvm en 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 Tots Els Drets Reservats |  <a href="//ja.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa</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>