


Welche Eigenschaft in CSS gibt den richtigen Abstand eines Elements an?
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;
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>
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>
Verwenden Sie CSS-Fülleigenschaften
Die Eigenschaftpadding 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;
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>
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!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

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

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.

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.

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

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

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

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

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
