Inhaltsverzeichnis
Verwenden Sie die CSS-Eigenschaft padding-right
Grammatik
Beispiel 3
Verwenden Sie CSS-Fülleigenschaften
Heim Web-Frontend CSS-Tutorial Welche Eigenschaft in CSS gibt den richtigen Abstand eines Elements an?

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

Sep 12, 2023 pm 07:13 PM

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices Mar 08, 2025 am 09:45 AM

Dies ist der 3. Beitrag in einer kleinen Serie, die wir in Form von Barrierefreiheit gemacht haben. Wenn Sie den zweiten Beitrag verpasst haben, lesen Sie "Verwalten des Benutzerfokus mit: Fokus-Sichtbar". In

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Mar 07, 2025 am 11:33 AM

Dieses Tutorial zeigt, dass professionelle JavaScript-Formulare mithilfe des Frameworks Smart Forms erstellt werden (Hinweis: Nicht mehr verfügbar). Während der Rahmen selbst nicht verfügbar ist, bleiben die Prinzipien und Techniken für andere Formbauer relevant.

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Mar 09, 2025 pm 12:53 PM

Die CSS-Box-Shadow- und Umrisseigenschaften haben Thema gewonnen. JSON-Unterstützung in WordPress 6.1. Sei ein paar Beispiele für die Funktionsweise in realen Themen und welche Optionen wir diese Stile auf WordPress -Blöcke und Elemente anwenden müssen.

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut Mar 02, 2025 am 09:03 AM

Der Aufbau eines Inline -Texteditors ist nicht trivial. Der Prozess beginnt damit, dass das Zielelement bearbeitbar wird und potenzielle SyntaxE -Ausnahmen behandelt. Erstellen Sie Ihren Editor Um diesen Editor zu erstellen, müssen Sie den Inhalt dynamisch ändern

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Mar 15, 2025 am 11:08 AM

Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.

Arbeiten mit GraphQL Caching Arbeiten mit GraphQL Caching Mar 19, 2025 am 09:36 AM

Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört

Datei hochladen mit Multer in node.js und ausdrücken Datei hochladen mit Multer in node.js und ausdrücken Mar 02, 2025 am 09:15 AM

Dieses Tutorial führt Sie durch das Erstellen eines Datei -Upload -Systems mit Node.js, Express und Multer. Wir werden die Hoch- und mehrere Datei -Uploads behandeln und sogar das Speichern von Bildern in einer MongoDB -Datenbank zum späteren Abrufen demonstrieren. Richten Sie zunächst Ihr Projec ein

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Mar 04, 2025 am 10:22 AM

In diesem Artikel werden die auf dem Envato -Markt verfügbaren Top -Skripte für PHP -Formulierungen untersucht und deren Funktionen, Flexibilität und Design verglichen. Lassen Sie uns vor dem Tauchen in bestimmte Optionen verstehen, was ein PHP -Formular Builder ist und warum Sie einen verwenden würden. Eine PHP -Form

See all articles