So verwenden Sie die CSS GAP -Eigenschaft

CSS gap Attribute: Einfacher Elementabstand

steuern

Kernpunkte

• CSS gap Eigenschaften ermöglichen es Entwicklern, den horizontalen und vertikalen Abstand zwischen Elementen, viele Layoutprobleme zu lösen und das Margenmanagement zu vereinfachen. Es ist mit Gitterlayouts, Flexbox-Layouts und mehrspaltigen Layouts kompatibel.
Die Eigenschaft
• gap kann zwei Werte akzeptieren: Zeilenabstand und Spaltenabstand. Wenn nur ein Wert angegeben wird, wird der Wert sowohl auf die Zeile als auch auf die Spalte angewendet. Der Abstandswert kann eine beliebige Länge, Prozentsatz oder sogar ein Wert sein, das unter Verwendung der calc() -Funktion berechnet wird.
• gap Eigenschaften eignen sich für CSS-Gitter, Flexbox- und Multi-Säulen-Layouts. Es funktioniert nahtlos in einem reaktionsschnellen Layout, wobei die Abstandsrichtung automatisch entsprechend der Boxanordnung eingestellt wird. Sie können auch den Abstand von Textelementen festlegen, indem Sie den Textcontainer auf display: grid und den gap -Weicher hinzufügen.
• Während die gap Eigenschaft eines Gitterlayouts ursprünglich grid-gap genannt wurde, ist es am besten, sich an gap zu halten, da es jetzt für Gitter-, Flexbox- und Multi-Säulen-Layouts geeignet ist. In einigen Fällen können Ausrichtungseigenschaften wie justify-content und align-content jedoch dazu führen, dass Elemente über den Wert gap hinausgehen. Beachten Sie auch, dass gap keine negativen Werte akzeptiert.

In diesem Artikel wird die Verwendung von CSS gap -attributen eingehend untersucht, die den Elementabstand leicht hinzufügen und viele Layoutprobleme lösen können, die Entwickler seit vielen Jahren geplagt haben.

gap Verwendung von Attributen

Das

gap Attribut ermöglicht es uns, den horizontalen und vertikalen Abstand zwischen den Elementen hinzuzufügen. Natürlich können wir immer margin verwenden, um dies zu erreichen. Die Verwendung von margin zum festgelegten Projektabstand kann jedoch umständlich sein - insbesondere wenn Projektpackungen -, weil das letzte Projekt immer zusätzliche Margen haben wird.

Das folgende Bild zeigt vier DIVs, die zum Abstand links und rechts und unter den Rändern einstellen:

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

Bitte überprüfen Sie das Beispiel auf CodePen: Die CSS Gap -Eigenschaft: Verwenden Sie den Rand anstelle von Gap

Beachten Sie, dass der Hintergrund des Behälters rechts und unten hervorgehoben wird?

gap Attribute fügen nur den Abstand zwischen Elementen hinzu, was das Layout sehr einfach macht. Das Folgende ist das gleiche Layout wie oben, aber diesmal verwendet statt : gap margin Bitte überprüfen Sie das Beispiel auf CodePen:

Die CSS GAP -Eigenschaft: Abstandselemente mit Gap ShortHand

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

Jetzt haben wir auf der rechten und unten keinen hässlichen zusätzlichen Abstand. Der Abstand liegt jetzt nur zwischen Projekten, und die Projekte sind im Container eng angeordnet.

Wir können

mit drei verschiedenen Layout-Modi verwenden: Gitter, Flexbox und Multi-Säulen. Wir werden jeden Modus in der Folge unten einführen.

Handbuch zur Verwendung gap Eigenschaften

verwendet gap ist so einfach wie das Schreiben gap: 10px. (Wir haben das Ergebnis in der Demo oben gesehen.) Aber mal sehen, was dies bedeutet.

gap Das Attribut kann zwei Werte akzeptieren: Zeilenabstand (d. H. Der Abstand zwischen Elementzeilen) und Spaltenabstand (d. H. Der Abstand zwischen Elementspalten): gap: <row-gap> <column-gap></column-gap></row-gap>.

Wenn wir nur einen Wert angeben, wird er auf alle Zeilen und angewendet.

Wir können auch die Eigenschaften row-gap und column-gap verwenden, um den Spaltenabstand bzw. Zeilenabstand anzugeben.

Der Wert von

gap kann jede Längeeinheit (z. B. PX, EM, VW), prozentuale Einheiten oder sogar Werte sein, die unter Verwendung der calc() -Funktion berechnet wurden.

wie man gap Eigenschaften

im CSS -Gitter verwendet

Wir sehen ein Beispiel oben mit gap mit Gitterlayout. Versuchen wir ein anderes Beispiel mit verschiedenen Einheiten:

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

Bitte überprüfen Sie das Beispiel auf CodePen: Die CSS -Gap -Eigenschaft: Verwenden Sie Lücke mit Grid Longhand

Diesmal haben wir verschiedene Einheiten für Zeilen und Spalten verwendet.

Ein zusätzlicher Vorteil von

gap besteht darin, dass es nahtlos in einem reaktionsschnellen Layout funktioniert. Wenn wir den Abstand zwischen zwei Elementen festlegen, gilt dieser Abstand unabhängig davon, ob die Elemente nebeneinander oder nach oben oder unten angeordnet sind, wie im folgenden Beispiel gezeigt.

Bitte überprüfen Sie das Beispiel auf CodePen: unt> 🎜>

Drücken Sie die 0,5 -fach -Taste am unteren Rand des Codetens oben oder öffnen Sie den Codepen in Ihrem Browser und erweitern und verengen das Ansichtsfenster, um zu sehen, wie die Abstandsrichtung gemäß der Anordnung der Box eingestellt wird. Wir profitieren hier von einem einzelnen Wert auf der Eigenschaft

, die auf Zeilen und Spalten angewendet werden kann. Wenn wir keinen Zeilenabstand auf kleineren Bildschirmen haben möchten, können wir stattdessen gap einstellen. Bitte versuchen Sie dies im CodePen oben. column-gap: 10px

Weitere Informationen zur Verwendung von Grid -Layout finden Sie in unserem CSS -Grid -Layout -Handbuch.

wie man

Eigenschaften gap in Flexbox verwendet

Als Flexbox zum ersten Mal erschien, hatte es kein

Attribut, also mussten wir uns der alten und schmerzhaften Art zuwenden, gap zu verwenden. Zum Glück ist die Verwendung von margin in modernen Browsern jetzt Mainstream und gut unterstützt. gap

wir können es wie in einem Raster verwenden:

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

Bitte überprüfen Sie das Beispiel auf CodePen:

Die CSS Gap -Eigenschaft: Verwenden Sie Lücke mit Flexbox

Im Fall unserer Flex -Projekt -Responsive -Zeilenumbrüche werden die Einstellungen gap nach Bedarf neu angepasst und werden normalerweise nicht sowohl in vertikalen als auch in horizontalen Richtungen ausgerichtet, wie im folgenden Beispiel gezeigt.

Bitte überprüfen Sie das Beispiel auf CodePen: Die CSS Gap -Eigenschaft: Verwenden Sie Lücke mit einem reaktionsschnellen Flexbox -Layout

Wenn der Abstand horizontal und vertikal ausgerichtet ist, ist es am besten, ein Netz zu verwenden.

Wie Gitter, wenn wir nur den Abstand zwischen Spalten oder Zeilen festlegen möchten, können wir column-gap bzw. row-gap verwenden.

So verwenden Sie gap Eigenschaften

im mehrspaltigen Layout

Multi-Säulen-Layout organisiert den Inhalt in Spalten, aber standardmäßig haben diese Spalten einen 1EM-Abstand vom Browser. Wir können die Eigenschaft gap verwenden, um unsere bevorzugte Abstandsbreite festzulegen:

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

Bitte überprüfen Sie das Beispiel auf CodePen: Die CSS Gap-Eigenschaft: Verwenden Sie Lücke in einem Multi-Säulen-Layout

(Versuchen Sie, das Attribut gap aus dem oben genannten Codeten zu entfernen, um zu sehen, was passiert.)

Da wir hier nur Spalten verarbeiten, wenden wir nur den Spaltenabstandswert an, da es keine Zeilen gibt, die diesen Wert anwenden können.

zum Spaß fügen wir auch eine vertikale Linie zwischen diesen Spalten hinzu:

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

Bitte überprüfen Sie das Beispiel auf CodePen: Die CSS-Gap-Eigenschaft: Verwenden von Gap und Spaltenregel im Multi-Säulen-Layout

Bitte beachten Sie, dass column-rule die Abkürzung für column-rule-width, column-rule-style und column-rule-color ist.

über gap nützliche Informationen zu den Attributen

Das

-Merkmal des gap -Srasterlayouts wird ursprünglich grid-gap bezeichnet, und seine vollständige Form lautet grid-row-gap und grid-column-gap. Diese Eigenschaften sind zwar noch gültig, aber es ist am besten, sich an gap zu halten, da sie jetzt für Gitter-, Flexbox- und Multi-Säulen-Layouts geeignet ist.

Das Multi-Säulen-Layout verfügt über eine ältere column-gap Eigenschaft, die ebenfalls noch gültig ist. Aber auch hier ist es in allen Fällen einfacher, gap zu erinnern.

Der Abstand kann als prozentualer Wert festgelegt werden, aber der Prozentsatz ist relativ zu welchem ​​Prozentsatz? Es hängt tatsächlich von vielen Faktoren ab und kann schwer vorherzusagen sein. Sie können dies in der Spezifikation weiter untersuchen. In der Regel ist es am besten, Prozentsätze in gap zu vermeiden, es sei denn, Sie wissen wirklich, was Sie tun.

Ausrichtungseigenschaften wie

justify-content und align-content können auch Elemente in Gitter- und Flexbox -Layouts trennen, und in einigen Fällen werden die Elemente über den gap -Werwert hinausgehen. Der Wert gap ist jedoch immer noch nützlich, da er einen minimalen Abstand zwischen den Elementen auf einem kleineren Bildschirm bietet.

Warum nicht gap verwenden, um den Abstand aller Elemente festzulegen?

Wie oben erwähnt, löst gap einige nervige Probleme im Zusammenhang mit dem Randabstand. Diese Margenprobleme können sich auch auf Text und andere Inhalte auswirken. Wenn wir beispielsweise den unteren Rand verwenden, um den Abstand von Textelementen (z. B. Absätze und Titel) festzulegen, gibt es nach dem letzten Element zusätzliche Ränder, oder wenn wir den oberen Rand verwenden, kann das erste Element zusätzlich erscheinen Marge. Es gibt einige einfache Möglichkeiten, dieses Problem in CSS zu lösen, aber es ist immer noch umständlich, und einige Entwickler haben sich stattdessen entschieden, stattdessen gap zu verwenden.

Um gap zum Einstellen des Abstands von Textelementen zu verwenden, setzen wir einfach den Textbehälter auf display: grid und fügen den gap -Wertzwert hinzu:

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

Die Elemente

<code><p></p> , <h1></h1>, <h2></h2> und <hr> sind jetzt Grid -Elemente. Bitte überprüfen Sie das Beispiel auf CodePen: Die CSS Gap -Eigenschaft: Abstandstextinhalt mit Gap

Aber sollten wir das tun? Ein Nachteil ist, dass alle Elemente gleich sind und der Abstand zwischen den Elementen, insbesondere um den Titel, visuell attraktiver ist. Es ist jedoch immer noch eine interessante Idee, gap dafür zu verwenden. Um dies weiter zu untersuchen, lesen Sie das sehr interessante Video von Kevin Powell über das Festlegen des Textabstands mit gap.

Zusammenfassung

gap Eigenschaften sind ein bequemes Werkzeug zum Einstellen von Projektabständen bei der Verwendung von Gitter-, Flexbox- und Multi-Säulen-Layouts. Es ermöglicht es uns, die alte chaotische margin -Methode nicht mehr anzuwenden. Es kann kreativ im Design verwendet werden, aber es nicht zu verwenden!

Weiteres Lesen

• Lesen Sie mehr über CSS Grid Layout
• Lesen Sie mehr über Flexbox -Layout
• Lesen Sie mehr über CSS Multi-Säulen-Layout
• Informationen zum CSS -Box Alignment Modul Level 3 -Spezifikation oder MDN über die gap -attribute
lesen

CSS gap Eigenschaften FAQ

Was sind CSS gap Eigenschaften?

css gap Attribute sind abgekürzte Attribute für row-gap und column-gap. Es gibt die Abstandsgröße zwischen Zeilen und Säulen in einem Gitter-, Flex- oder Multi-Säulen-Layout an. Diese Eigenschaft ist besonders nützlich, um visuell attraktive und gut strukturierte CSS-Layouts zu erstellen. Es hilft, einen konsistenten Abstand und die Ausrichtung in Designelementen aufrechtzuerhalten.

CSS gap Wie funktionieren Attribute?

CSS gap Eigenschaften funktionieren, indem die Größe (Space) zwischen Zeilen und Spalten festgelegt wird. Der erste Wert, den Sie angeben, wird den Zeilenabstand festgelegt und der zweite Wert setzt den Spaltenabstand. Wenn Sie nur einen Wert angeben, wird sowohl Zeilen- als auch Spaltenabstand auf diesen Wert festgelegt. Zum Beispiel setzt gap: 10px 20px den Zeilenabstand auf 10px und den Spaltenabstand auf 20px.

Kann ich das CSS gap -attribut in Flexbox verwenden?

Ja, Sie können das CSS gap -TRUTS in Flexbox verwenden. Sie können einen Abstand zwischen Flex -Projekten erstellen. Bitte beachten Sie jedoch, dass diese Funktion möglicherweise nicht in allen Browsern unterstützt wird, insbesondere in älteren Browsern. Überprüfen Sie immer die Browserkompatibilität, bevor Sie es verwenden.

Was ist der Unterschied zwischen

und gap in grid-gap?

Das Attribut

grid-gap ist abgekürztes Attribut für grid-row-gap und grid-column-gap, das dem Gitterlayout gewidmet ist. Das CSS -Gitter -Layout -Modul Level 2 hat jedoch grid-gap durch gap ersetzt. Jetzt kann gap für Gitter-, Flex- und Mehrspalz-Layouts verwendet werden.

Wie verwendet ich CSS gap Eigenschaften im reaktionsschnellen Design?

Sie können es in reaktionsschnellem Design verwenden, indem Sie das CSS gap -Träger mit relativen Einheiten wie Prozentsätzen oder Ansichtsfenstereinheiten festlegen. Auf diese Weise wird die Abstandsgröße an die Größe des Ansichtsfensters oder das übergeordnete Element angepasst, wodurch Ihr Layout reagiert.

Kann ich negative Werte im CSS gap -attribut verwenden?

Nein, Sie können negative Werte im CSS gap -attribut nicht verwenden. gap Attribut akzeptiert nur nicht negative Werte. Wenn Sie versuchen, einen negativen Wert zu verwenden, wird er ignoriert und der Standardwert wird verwendet.

CSS gap Was ist der Standardwert des Attributs?

Der Standardwert des

CSS gap -attribut ist normal, was bedeutet, dass der Browser die Größe des Abstands bestimmt. Sie können diesen Standardwert jedoch überschreiben, indem Sie die gewünschte Abstandsgröße angeben.

Kann ich das CSS gap -attribut in einem Multi-Säulen-Layout verwenden?

Ja, Sie können das CSS gap -attribut in einem Multi-Säulen-Layout verwenden. Sie können den Abstand zwischen den Spalten in einem mehrspaltigen Layout einstellen.

CSS gap Werden Attribute vererbt?

Nein, CSS gap Attribute werden nicht vererbt. Dies bedeutet, dass die für das übergeordnete Element angegebene Abstandsgröße nicht auf seine untergeordneten Elemente angewendet wird.

Welche Einheiten kann ich im CSS gap -attribut verwenden?

Sie können mehrere Einheiten im CSS gap -attribut verwenden, einschließlich Pixel (PX), EM (EM), REM (REM), Prozentsätze (%) und Ansichtsfenster (VW, VH). Jedes Gerät verfügt über eigene Anwendungsfälle, die entsprechend Ihren spezifischen Anforderungen verwendet werden können.

Bitte beachten Sie, dass alle CodePen -Links Platzhalter sind und durch die tatsächlichen verfügbaren Links ersetzt werden müssen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS GAP -Eigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!