Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So legen Sie den Abstand in CSS fest

醉折花枝作酒筹
Freigeben: 2023-01-05 16:10:28
Original
5965 Leute haben es durchsucht

In CSS können Sie das Padding-Attribut verwenden, um den Abstand festzulegen. Sie müssen nur „Auffüllung: Wert + Einheit | Prozentwert“ für das Element festlegen. Die padding-Eigenschaft legt die Breite aller Polsterungen an einem Element oder die Breite der Polsterungen auf jeder Seite fest. Das Padding-Attribut erlaubt keine Angabe negativer Padding-Werte.

So legen Sie den Abstand in CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Schauen wir uns an, wie man die Polsterung (Padding) einstellt:

Unsere Polsterung ist eines der CSS-Box-Modelle, also schauen wir uns nun an, wie man die Polsterung einstellt.

padding: Es handelt sich um ein Kurzattribut, das alle Füllattribute in einer Deklaration festlegen kann.

Verwenden Sie nur das Polsterungsattribut, um die obere, untere, linke und rechte Polsterung zu ändern.

Mögliche Werte:

Länge: Definieren Sie einen festen Abstand (Pixel, pt, em usw.)

%: Definieren Sie einen Abstand mit einem Prozentwert

Verwendung:

padding-left Legen Sie den Abstand des fest Objekt zum linken Randabstand

div{padding-left:5px}
Nach dem Login kopieren

Der linke Abstand innerhalb des Objekts beträgt 5px

padding-right Stellen Sie den Randabstand von der rechten Seite des Objekts ein

div{padding-right:5px}
Nach dem Login kopieren

Der rechte Abstand innerhalb des Objekts beträgt 5px

padding-top-Einstellung Der Füllabstand am oberen Rand des Objekts beträgt 5px

div{padding-top:5px}
Nach dem Login kopieren

Der Füllabstand am oberen Rand des Objekts beträgt 5px

padding-bottom Legen Sie den Füllabstand am unteren Rand des Objekts fest

div{padding-bottom:5px}
Nach dem Login kopieren

Der Abstand am unteren Rand des Objekts beträgt 5 Pixel.

Wenn alle vier Parameterwerte angegeben sind, werden sie in der Reihenfolge oben-rechts-unten-links auf die vier Seiten angewendet. Wenn nur einer vorhanden ist, wird dieser für alle vier Seiten verwendet.

Wenn zwei vorhanden sind, ist das erste für Auf-Ab und das zweite für Links-Rechts.

Wenn drei vorhanden sind, ist die erste für oben, die zweite für links-rechts und die dritte für unten.

Um dieses Attribut für ein Inline-Objekt zu verwenden, müssen Sie zunächst das Höhen- oder Breitenattribut des Objekts festlegen oder das Positionsattribut auf „absolut“ setzen.

Der Wert der Polsterung darf nicht negativ sein.

Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .css{ 
                width:350px; 
                height:80px; 
                border:1px solid #00F; 
                padding-left:40px;
                padding-right:40px;
                padding-top:40px;
                padding-bottom:40px;
                /* 可以合起来写成padding:40px; */
                } 
    </style> 
    </head>

    <body>
        <div class="css">padding用法</div>
    </body>
</html>
Nach dem Login kopieren

Rendering:

Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie den Abstand in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!