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?
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
1384
52
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
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten?
Apr 02, 2025 pm 06:17 PM
Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Vergleich von Browsern für reaktionsschnelles Design
Apr 02, 2025 pm 06:25 PM
Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben
Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass
Apr 03, 2025 am 10:30 AM
Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.
