Äußere Abstände und innere Abstände sind der Raum um ein Element. Outer Abstände wird auch als Rand bezeichnet und ist der Raum außerhalb der Grenzen des Elements. Inner Abstände wird auch als Padding bezeichnet und ist der Raum innerhalb dieser Ränder. Wenn Sie die äußeren und inneren Abstände eines Elements anpassen, ändern Sie dessen Platzierung und Aussehen. Dies kann dazu führen, dass Ihre Website individueller und professioneller aussieht.
So passen Sie den äußeren und inneren Abstand um ein Element an:
-
Klicken Sie auf Abstände .
-
Wenn Sie den Außenabstand ändern möchten, klicken Sie auf die Zahlen im entsprechenden Feld, um diese zu bearbeiten. Sie können auch auf eine der Zahlen klicken und den Wert mit dem Schieberegler anpassen.
-
Um den Innenabstand (Füllung) zu ändern, klicken Sie auf die Zahlen im entsprechenden Feld, um diese zu bearbeiten. Sie können auch auf eine der Zahlen klicken und den Wert mit dem Schieberegler anpassen.
-
Wenn Sie Editor 2.0 verwenden: Klicken Sie in die entsprechenden Felder, um die Rand- und Abstandswerte zu bearbeiten. Die Werte für den horizontalen Rand und den Abstand sind miteinander verknüpft. Wenn Sie eines ändern, wird das andere automatisch aktualisiert. Sie können die Verknüpfung aufheben, indem Sie auf das Verknüpfungssymbol klicken.
Hinweis
Wenn Sie seltsame Leerzeichen sehen, die Sie nicht entfernen können, überprüfen Sie alle Teile des widget, einschließlich der Spalte, in der es sich befindet.
Bei Elementen innerhalb einer Spalte oder einer inneren Spalte können Sie den Rand des Elements schnell anpassen, indem Sie die Ränder des Elements auf der Leinwand in dieselbe Wegbeschreibung wie die Spalte ziehen. Das bedeutet, dass der linke und rechte Rand in horizontalen Spalten und der obere und untere Rand in vertikalen Spalten angepasst werden können.
Erwägungen
-
Wenn Sie Inline-Ränder direkt von der Leinwand aus anpassen, werden die Ränder nicht verknüpft. Wenn Sie die Ränder im Entwurfsbedienfeld anpassen, werden die Ränder verknüpft, d. h. wenn Sie einen der Ränder ändern, wird der andere Rand automatisch entsprechend aktualisiert.
-
Beim Anpassen der Inline-Ränder wird die gleiche Größeneinheit (px, %, vh, vw), die im Design-Bedienfeld festgelegt wurde, beibehalten, es sei denn, der Wert ist 0, in diesem Fall wird er auf px zurückgesetzt.
Im Flex-Modus und Editor 2.0 gibt es zusätzliche Messoptionen:
-
px (Pixel). Bietet eine feste Maßeinheit, die nicht von Gerätegrößenvarianten beeinflusst wird.
-
% (Prozent). Eine vielseitige Einheit, die Elemente proportional basierend auf der Größe ihres Containers skaliert.
-
vh (Höhe des Ansichtsfensters). Skaliert Elemente dynamisch in Bezug auf die Höhe des Bildschirms (Ansichtsfenster).
-
vw (Viewport-Breite). Passt Elemente dynamisch an die Bildschirmbreite (Viewport) an und sorgt so für eine proportionale Skalierung auf verschiedenen Geräten.
Hinweis
Ausführliche Informationen finden Sie unter Größeneinheiten.
So ändern Sie die Größeneinheit:
-
Öffnen Sie das Design-Panel eines Elements.
-
Navigieren Sie zum Abschnitt Abstände .
-
Klicken Sie in eines der Kästchen.
-
Klicken Sie auf die aktuelle Größeneinheit.
-
Klicken Sie auf die gewünschte Größeneinheit.