logo

TechCodeview

CSS-Padding

Padding ist der Abstand zwischen dem Inhalt und dem definierten Rand eines Elements. Unter Polstern versteht man das Hinzufügen von Leerräumen innerhalb des Elements, die Steuerung seines Innenraums und somit die Beeinflussung seiner Abmessungen und seines Erscheinungsbilds.

Inhaltsverzeichnis

CSS-Padding

Die CSS-Padding-Eigenschaft wird verwendet, um Abstand zwischen dem Inhalt des Elements und dem Rand des Elements zu schaffen. Es wirkt sich nur auf den Inhalt innerhalb des Elements aus.



CSS-Padding unterscheidet sich von CSS-Marge Da der Rand der Abstand zwischen benachbarten Elementrändern ist und der Abstand der Abstand zwischen Inhalt und Elementrand ist.

Mit den Padding-Eigenschaften können wir die obere, untere, linke und rechte Polsterung unabhängig voneinander ändern. CSS-Padding-Eigenschaften

Linkedlist und Arraylist

CSS bietet Eigenschaften zum Festlegen des Abstands für einzelne Seiten eines Elements, die wie folgt definiert sind:

  • Polsterung oben : Legt die Polsterung für die Oberseite des Elements fest.
  • Polsterung-rechts : Legt den Abstand für die rechte Seite des Elements fest.
  • Polsterung unten : Legt die Polsterung für die Unterseite des Elements fest.
  • Polsterung links : Legt den Abstand für die linke Seite des Elements fest.

Padding-Eigenschaften können die folgenden Padding-Werte haben:

  • Länge – in cm, px, pt usw.
  • Breite – % Breite des Elements.
  • erben- Polsterung vom übergeordneten Element erben

Syntax: 

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

Beispiel: Zur Veranschaulichung der Verwendung der padding-Eigenschaft, bei der wir jede Seite des div einzeln auffüllen.

Polymorphismus Java
HTML 
   Padding-Beispieltitel><style>Körper { Rand: 0;  Polsterung: 20px;  Breite: 50 %;  } h2 { Farbe: grün;  } .myDiv { Hintergrundfarbe: hellblau;  Rand: 2 Pixel einfarbig schwarz;  /* Polsterung auf jede Seite einzeln anwenden */ padding-top: 80px;  padding-right: 100px;  Polsterung unten: 50px;  padding-left: 80px;  } .inner { Hintergrundfarbe: rosa;  Rand: 2 Pixel einfarbig schwarz;  Breite: 70px;  Höhe: 50px;  Anzeige: Flex;  align-items: center;  rechtfertigen-Inhalt: Mitte;  } style> head> <body> <div> <div>Pad_Boxdiv> div> body> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Ausgabe:</strong>  </b>  </p>  <img src='//techcodeview.com/img/css-basics/49/css-padding.webp' alt="CSS-Padding"><p>CSS-Padding</p> <p dir='ltr'>  <br></p> <h2 id='shorthand-property-for-padding-in-css'>  <b>  <strong>Abkürzungseigenschaft für das Auffüllen in CSS</strong>  </b>  </h2><p dir='ltr'><span>Mit der Kurzschrift-Padding-Eigenschaft in CSS können Sie den Abstand auf allen Seiten (oben, rechts, unten, links) eines Elements in einer einzelnen Zeile mit einigen Kombinationen festlegen, sodass wir den Abstand problemlos auf unser Zielelement anwenden können.</span></p> <p dir='ltr'>  <b>  <strong>Bei der Verwendung von Abkürzungseigenschaften gibt es vier Fälle:</strong>  </b>  </p> <ol><li value='1'><span>Wenn die Padding-Eigenschaft einen Wert hat.</span></li><li value='2'><span>Wenn die Padding-Eigenschaft zwei Werte enthält.</span></li><li value='3'><span>Wenn die Padding-Eigenschaft drei Werte enthält.</span></li><li value='4'><span>Wenn die Padding-Eigenschaft vier Werte enthält.</span></li></ol><h3 id='css-shorthand-padding-property-for-one-value'>  <b>  <strong>CSS</strong>  </b>  <span>Kurzschrift-Auffülleigenschaft für O</span>  <b>  <strong>ne Wert</strong>  </b>  </h3><p dir='ltr'><span>Wenn die Eigenschaft „padding“ einen Wert hat, wendet sie die Polsterung auf alle Seiten eines Elements an. Beispiel: Polsterung: 20px wendet gleichmäßig 20 Pixel Polsterung auf alle Seiten an.</span></p> <h3 id='syntax-1'>  <b>  <strong>Syntax:</strong>  </b>  </h3><pre class='hljs'>.element {  /* Applies 20px padding to all sides */  padding: 20px; }></pre><p dir='ltr'>  <b>  <strong>Beispiel:</strong>  </b>  <span>Zur Veranschaulichung der Anwendung von 20px-Padding auf allen Seiten von div.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Die Padding-Eigenschaft hat einen Werttitle><style>Körper { Rand: 0;  Polsterung: 20px;  } h2 { Farbe: grün;  } .myDiv { Hintergrundfarbe: grau;  Rand: 2 Pixel einfarbig schwarz;  Textausrichtung: Mitte;  Breite: 40 %;  /* Wendet 10px-Auffüllung auf alle Seiten an */ padding: 20px;  } .inner { Höhe: 70px;  Breite: 70px;  Hintergrundfarbe: rosa;  Anzeige: Flex;  align-items: center;  rechtfertigen-Inhalt: Mitte;  } style> head> <body> <div> <div>Paddingdiv> div> body> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Ausgabe:</strong>  </b>  </p>  <img src='//techcodeview.com/img/css-basics/49/css-padding-2.webp' alt="CSS-Padding"><p>CSS-Padding-Eigenschaft mit einem Wert.</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/typescript-foreach">Typoskript-foreach-Schleife</a>
</blockquote> <h2 id='padding-property-for-two-values'><span>Padding-Eigenschaft für T</span>  <b>  <strong>wo Werte</strong>  </b>  </h2><p dir='ltr'><span>Wenn die padding-Eigenschaft zwei Werte enthält, gilt der erste Wert für die obere und untere Polsterung und der zweite Wert für die rechte und linke Polsterung. Zum Beispiel – Polsterung: 10px 20px, d. h. die obere und untere Polsterung beträgt 10px, während die rechte und linke Polsterung 20px beträgt.</span></p> <h3 id='syntax-2'>  <b>  <strong>Syntax:</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>Beispiel:</strong>  </b>  <span>Zur Veranschaulichung der Verwendung einer Padding-Eigenschaft mit zwei Werten.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Die Padding-Eigenschaft enthält zwei Wertetitle><style>Körper { Rand: 0;  Polsterung: 20px;  } h2 { Farbe: grün;  } .myDiv { Hintergrundfarbe: grau;  Rand: 2 Pixel einfarbig schwarz;  Textausrichtung: Mitte;  Breite: 40 %;  Polsterung: 10px 20px;  /* Wendet 10 Pixel Abstand oben und unten an, 20 Pixel Abstand rechts und links */ } .inner { height: 70px;  Breite: 70px;  Hintergrundfarbe: rosa;  } style> head> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Ausgabe:</strong>  </b>  </p>  <img src='//techcodeview.com/img/css-basics/49/css-padding-3.webp' alt="CSS-Padding"><p>CSS-Auffüllung</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/sql-update-with-join">Update von Join SQL</a>
</blockquote> <h3 id='padding-property-for-three-values'><span>Padding-Eigenschaft für</span>  <b>  <strong>Drei Werte</strong>  </b>  </h3><p dir='ltr'><span>Wenn die Eigenschaft „padding“ drei Werte enthält, legt der erste Wert den oberen Abstand fest, der zweite Wert den rechten und linken Abstand und der dritte Wert den unteren Abstand.</span></p> <p dir='ltr'><span>Zum Beispiel – Polsterung: 10px 20px 30px;</span></p> <ul><li value='1'><span>Die obere Polsterung beträgt 10 Pixel</span></li><li value='2'><span>Der rechte und linke Abstand beträgt 20 Pixel</span></li><li value='3'><span>Die untere Polsterung beträgt 30 Pixel</span></li></ul><h3 id='syntax-3'>  <b>  <strong>Syntax:</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>Beispiel:</strong>  </b>  <span>In diesem Beispiel verwenden wir eine Auffüllung mit drei Werten.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Die Padding-Eigenschaft enthält drei Wertetitle><style>Körper { Rand: 0;  Polsterung: 20px;  } h2 { Farbe: grün;  } .myDiv { Hintergrundfarbe: gelbgrün;  Rand: 2 Pixel einfarbig schwarz;  Textausrichtung: Mitte;  Breite: 40 %;  Polsterung: 10px 20px 30px;  /* Wendet 10 Pixel Abstand oben an, 20 Pixel Abstand rechts und links, 30 Pixel Abstand unten */ } .inner { height: 70px;  Breite: 70px;  Hintergrundfarbe: grau;  } style> head> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Ausgabe:</strong>  </b>  </p>  <img src='//techcodeview.com/img/css-basics/49/css-padding-4.webp' alt="CSS-Padding"><p>CSS-Auffüllung</p> <p dir='ltr'>  <br></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/heap-sort-algorithm">Heap und Heap-Sortierung</a>
</blockquote> <h2 id='padding-property-having-four-values'>  <b>  <strong>Padding-Eigenschaft mit vier Werten</strong>  </b>  </h2><p dir='ltr'><span>Wenn die Eigenschaft „padding“ vier Werte enthält, legt der erste Wert den oberen Abstand fest, der zweite Wert legt den rechten Abstand fest, der dritte Wert legt den unteren Abstand fest und der vierte Wert legt den linken Abstand fest:</span></p> <p dir='ltr'><span>Zum Beispiel – Polsterung: 10px 20px 15px 25px;</span></p> <ul><li value='1'><span>Die obere Polsterung beträgt 10 Pixel</span></li><li value='2'><span>Der rechte Abstand beträgt 5 Pixel</span></li><li value='3'><span>Die untere Polsterung beträgt 15 Pixel</span></li><li value='4'><span>Der linke Abstand beträgt 20 Pixel</span></li></ul><h3 id='syntax-4'>  <b>  <strong>Syntax:</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>Beispiel:</strong>  </b>  <span>Zur Veranschaulichung der Verwendung einer Padding-Eigenschaft mit vier Werten.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Die Padding-Eigenschaft enthält vier Wertetitle><style>Körper { Rand: 0;  Polsterung: 20px;  } h2 { Farbe: grün;  } .myDiv { Hintergrundfarbe: Cyan;  Rand: 2 Pixel einfarbig schwarz;  Textausrichtung: Mitte;  Breite: 40 %;  Polsterung: 10px 20px 15px 25px;  /* Wendet 10 Pixel Abstand oben, 20 Pixel Abstand rechts, 15 Pixel Abstand unten und 25 Pixel Abstand links an */ } .inner { height: 70px;  Breite: 70px;  Hintergrundfarbe: schwarz;  Farbe weiß;  Anzeige: Flex;  align-items: center;  rechtfertigen-Inhalt: Mitte;  } style> head> <body> <div> <div>Boxdiv> div> body> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Ausgabe:</strong>  </b>  </p>  <img src='//techcodeview.com/img/css-basics/49/css-padding-5.webp' alt="CSS-Padding"><p>CSS-Auffüllung</p> <h2 id='all-css-padding-properties'><span>Alle CSS-Padding-Eigenschaften</span></h2><p dir='ltr'><span>Durch die Kombination einzelner Seiteneigenschaften und Kurzeigenschaften ergeben sich insgesamt fünf Eigenschaften des CSS-Paddings:</span></p> <table class="table"><tbody><tr><th><span>Eigentum</span></th><th><span>Beschreibung</span></th></tr></tbody><tbody><tr><td>  <b>  <strong>Polsterung</strong>  </b>  </td><td><span>Abkürzungseigenschaft zum Festlegen aller Fülleigenschaften in einer Deklaration</span></td></tr><tr><td>  <b>  <strong>Polsterung unten</strong>  </b>  </td><td><span>Legt die untere Polsterung eines Elements fest</span></td></tr><tr><td>  <b>  <strong>Polsterung links</strong>  </b>  </td><td><span>Legt den linken Abstand eines Elements fest</span></td></tr><tr><td>  <b>  <strong>Polsterung-rechts</strong>  </b>  </td><td><span>Legt den richtigen Abstand eines Elements fest</span></td></tr><tr><td>  <b>  <strong>Polsterung oben</strong>  </b>  </td><td><span>Legt die obere Polsterung eines Elements fest</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="">Kategorie</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/logarithms/">Logarithmen</a> </li><li> <a href="/windows-errors/">Windows-Fehler</a> </li><li> <a href="/web-technologies/">Web-Technologien</a> </li><li> <a href="/r-tutorial/">R-Tutorial</a> </li><li> <a href="/geeks-premier-league-2023-cat/">Geeks Premier League 2023</a> </li><li> <a href="/cpp-inheritance/">Cpp-Vererbung</a> </li><li> <a href="/java-misc/">Java Sonstiges</a> </li><li> <a href="/summary/">Zusammenfassung</a> </li><li> <a href="/python-turtle-programming/">Python-Turtle-Programmierung</a> </li><li> <a href="/hash/">Hash</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">Erhalten Sie das aktuelle Datum und die aktuelle Uhrzeit in Java</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> So erhalten Sie das aktuelle Datum und die aktuelle Uhrzeit in Java-Beispielen mithilfe der Klassen java.time.LocalDate, java.time.Calendar, java.time.LocalTime, java.util.Date, java.sql.Date und Calendar. Wir können das aktuelle Datum und die aktuelle Uhrzeit in Java auf verschiedene Arten abrufen.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/get-current-date-time-java"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Interessante Artikel</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/how-check-routing-table-linux-route-command">So überprüfen Sie die Routing-Tabelle unter Linux | Route-Befehl</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/html-attributes/">Html-Attribute</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/sdlc-v-model-software-engineering">SDLC V-Modell – Software Engineering</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/mastering-search-replace-vi-editor">Beherrschen von Suchen und Ersetzen im Vi-Editor</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/adblock-plus-android">AdBlock Plus für Android</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">Beliebte Beiträge</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/java-list">Java-Listenmethoden</a>
</li><li><a href="/mylivecricket-alternatives">mylivericket</a>
</li><li><a href="/data-structures-java">Datenstrukturen in Java</a>
</li><li><a href="/software-testing-tutorial">Softwaretest</a>
</li><li><a href="/java-list">Beispiel einer Liste in Java</a>
</li><li><a href="/dr-vikas-divyakirti">vikas divyakirti</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 Alle Rechte Vorbehalten |  <a href="//uk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</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>