1. CSS-Marginattribut (Marge)
Die CSS-Margin-Eigenschaft definiert den Abstand um ein Element.
margin löscht den umgebenden Bereich (äußerer Rand) des Elements. Der Rand hat keine Hintergrundfarbe und ist vollständig transparent.
Mit „Rand“ können Sie den oberen, unteren, linken und rechten Rand eines Elements einzeln ändern, oder Sie können alle Eigenschaften auf einmal ändern.
1. Ränder mithilfe von Pixelwerten (px) festlegen
<!DOCTYPEhtml><html><head><metacharset=utf-8/><title>Einfaches Erlernen von CSS</title><styletype=text/css>p.nomargin{background-color:#FF0000}p.margin { background-color:#FF0000;margin-top:100px;margin-bottom:100px;margin-left:80px;margin-right:80px;}</style></head><body><p>Dies ist ein nein Absatz mit angegebener Randgröße</p><p>Dies ist ein Absatz mit angegebener Randgröße</p></body></html>Laufergebnisse:
2. Verwenden Sie das Randabkürzungsattribut, um den äußeren Rand festzulegen (cm-Wert cm, Prozentwert %)
Die Kurzschrifteigenschaft „margin“ legt alle Randeigenschaften in einer Deklaration fest. Dieses Attribut kann 1 bis 4 Werte haben.
Beispiel:
(1)Rand: 10px 5px 15px 20px;
a. Der obere Rand beträgt 10 Pixel
b. Der rechte Rand beträgt 5 Pixel
c. Der untere Rand beträgt 15 Pixel
d.Der linke Rand beträgt 20 Pixel
(2)Rand: 10px 5px 15px;
a. Der obere Rand beträgt 10 Pixel
b. Der rechte und linke Rand beträgt 5 Pixel
c. Der untere Rand beträgt 15 Pixel
(3)Rand: 10px 5px;
a. Der obere und untere Rand beträgt 10 Pixel
b. Der rechte und linke Rand beträgt 5 Pixel
(4)Rand: 10px;
a. Alle vier Ränder sind 10 Pixel groß
Hinweis: Negative Werte sind zulässig.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>Einfaches Erlernen von CSS</title><styletype=text/css>p{background-color:aqua;}p.ex1{margin: 2cm5cm3cm5cm ;}p.ex2{margin:20%25%30%35%;</style></head><body><p>Dies ist ein Absatz ohne angegebene Randgröße</p><p>Dies Dies ist ein Absatz, dessen Randgröße mit „cm cm“ angegeben wird.</p><p>Dies ist ein Absatz, dessen Randgröße mit „Prozentwert %“ angegeben wird.</p></body></html>Laufergebnisse:
2. Randüberlappungs- oder Überlagerungsproblem
1. Randkollaps bedeutet, dass zwei oder mehr benachbarte Ränder in vertikaler Richtung zusammengeführt und zu einem Rand zusammengeführt werden. Beim Randfalten sind einige Dinge zu beachten:
(1) Die Randfaltung erfolgt nur bei Elementen auf Blockebene.
(2) Die Ränder schwebender Elemente werden mit keinem Rand zusammenbrechen.
(3) Bei einem Element auf Blockebene, bei dem das Überlaufattribut festgelegt ist und dessen Wert nicht sichtbar ist, werden die Ränder nicht mit seinen untergeordneten Elementen reduziert.
(4) Die Ränder absolut positionierter Elemente kollabieren nicht mit irgendwelchen Rändern;
(5) Die Ränder des Stammelements (z. B. <body>) werden nicht mit anderen Rändern zusammengelegt.
2. CSS-Randüberlappung und wie man sie verhindert
Randüberlappung bedeutet, dass sich die angrenzenden Ränder (ohne nicht leeren Inhalt, Auffüllung oder Ränder dazwischen) von zwei oder mehr Boxen (die benachbart oder verschachtelt sein können) überlappen und einen einzigen Rand bilden.
Die vertikal benachbarten Grenzen von zwei oder mehr Boxen auf Blockebene überlappen sich. Die resultierende Randbreite ist die größte der angrenzenden Randbreiten. Wenn eine negative Grenze auftritt, wird die negative Grenze mit dem größten Absolutwert von der größten positiven Grenze abgezogen. Wenn keine positiven Grenzen vorhanden sind, wird die negative Grenze mit dem größten Absolutwert von Null subtrahiert. Hinweis: Angrenzende Boxen dürfen nicht durch Elemente mit Eltern-Kind- oder Geschwisterbeziehungen generiert werden.