Welche Eigenschaft in CSS gibt den richtigen Abstand eines Elements an?-CSS-Tutorial-php.cn

Welche Eigenschaft in CSS gibt den richtigen Abstand eines Elements an?

PHPz

Freigeben： 2023-09-12 19:13:10

nach vorne

706 Leute haben es durchsucht

CSS 中哪个属性指定元素的右填充？

In CSS können wir mit der padding-Eigenschaft zusätzlichen Abstand zwischen dem Rand eines HTML-Elements und seinem Inhalt hinzufügen. Beim rechten Abstand wird nur Platz zwischen dem Elementinhalt und dem rechten Rand hinzugefügt.

Hier lernen wir zwei verschiedene Eigenschaften kennen, um die richtige Polsterung eines Elements festzulegen.

Verwenden Sie die CSS-Eigenschaft padding-right

Die Eigenschaft „padding-right“ gibt den richtigen Abstand eines Elements in CSS an. Immer wenn wir den rechten Abstand für ein Element angeben, entspricht die Breite des Elements der tatsächlichen Breite + dem rechten Abstand.

Grammatik

Benutzer können der folgenden Syntax folgen, um die richtige Auffüllung eines Elements anzugeben.

padding-right: 100px;

Nach dem Login kopieren

Beispiel 1

Im folgenden Beispiel enthält das übergeordnete Div mehrere untergeordnete Divs. Mit der CSS-Eigenschaft „padding-right“ geben wir einen rechten Abstand von „300px“ für das übergeordnete Div an. Darüber hinaus geben wir für alle untergeordneten div-Elemente ein Padding-Right von 100 Pixel an.

In der Ausgabe kann der Benutzer beobachten, dass zwischen dem rechten Rand und dem untergeordneten Div ein Abstand von 300 Pixeln vorhanden ist. Zusätzlich gibt es 100 Pixel freien Platz zwischen dem rechten Rand und dem Textinhalt.

<html>
<style>
   .parent {
      width: 300px;
      height: 400px;
      border: 2px solid red;
      padding-right: 300px;
      display: flex;
      flex-wrap: wrap;
   }
   .child {
      width: 200px;
      height: 100px;
      border: 2px solid green;
      padding-right: 100px;
   }
</style>
<body>
   <h3>Using the <i> padding-right CSS property </i> to add the padding at right in the HTML element.</h3>
   <div class = "parent">
      <div class = "child"> This is a child div. </div>
      <div class = "child"> This is a child div. </div>
      <div class = "child"> This is a child div. </div>
   </div>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Im folgenden Beispiel haben wir eine Kartenkomponente erstellt und ein Bild hinzugefügt. Zusätzlich haben wir dem Karten-Div einen rechten Abstand von 10 Pixeln gegeben. In der Ausgabe kann der Benutzer rechts einen 10-Pixel-Bereich sehen.

<html>
<style>
   .card {
      width: 520px;
      height: 100px;
      background-color: grey;
      padding-right: 10px;
   }
</style>
<body>
   <h3>Using the <i> padding-right CSS property </i> to add the padding at right in the HTML element.</h3>
   <div class = "card">
      <img src = "https://www.tutorialspoint.com/images/logo.png" alt = "">
   </div>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie CSS-Fülleigenschaften

Die Eigenschaft

padding legt die Polsterung auf allen vier Seiten eines Elements fest. Wir können die rechte Polsterung auf einen Wert und die anderen Seiten auf 0 setzen. Der erste Wert steht für die Oberseite, der zweite für die rechte Seite, der dritte für die Unterseite und der vierte für die linke Seite. Daher behalten wir bis auf den zweiten Wert 0 bei.

Grammatik

Benutzer können die CSS-Eigenschaft „padding“ verwenden, um die richtige Auffüllung eines Elements gemäß der folgenden Syntax festzulegen.

padding: 0 value 0 0;

Nach dem Login kopieren

Beispiel 3

Im folgenden Beispiel haben wir ein Karten-Div und etwas Text innerhalb des Container-Divs hinzugefügt. Zusätzlich geben wir „5rem“-Auffüllung auf der rechten Seite des Container-Div-Elements. Der Benutzer kann den 5rem-Abstand zwischen dem rechten Rand des Container-Div und seinem Inhalt beobachten.

<html>
<style>
   .container {
      width: 10rem;
      height: 10rem;
      background-color: #f08a8a;
      padding: 0 5rem 0 0;
   }
</style>
<body>
   <h3>Using the <i> padding CSS property </i> to add the padding at right in the HTML element.</h3>
   <div class = "container">
      <div class = "card">
         <h3>This is a card inside the container div. The right padding is 2rem.</h3>
      </div>
   </div>
</body>
</html>

Nach dem Login kopieren

Benutzer lernen, den richtigen Abstand für HTML-Elemente festzulegen und können die CSS-Eigenschaften „padding-right“ oder „padding“ verwenden. Wenn wir das Padding-Attribut verwenden, müssen wir nur den zweiten Wert angeben und die anderen Werte auf 0 belassen.

Das obige ist der detaillierte Inhalt vonWelche Eigenschaft in CSS gibt den richtigen Abstand eines Elements an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!