Heim  >  Artikel  >  Web-Frontend  >  So legen Sie den Abstand in CSS fest

So legen Sie den Abstand in CSS fest

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-21 17:27:516010Durchsuche

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}

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}

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}

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}

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>

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!

Stellungnahme:
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