CSS<\/a> sind, bietet Elementor leistungsstarke Werkzeuge zur Vereinfachung und Optimierung Ihres Workflows bei der Gestaltung von R\u00e4ndern und Layouts. <\/p>\n\nVerst\u00e4ndnis der Grundlagen von R\u00e4ndern <\/h2>\n\nWas sind R\u00e4nder in CSS?<\/h3>\n\n R\u00e4nder erzeugen unsichtbaren Raum um Ihre Website-Elemente. Stellen Sie sich einen Bilderrahmen vor: Das Foto ist Ihr Inhalt, und der Rahmen darum herum ist der Rand. <\/p>\n\n
R\u00e4nder verhindern, dass Elemente wie Abs\u00e4tze, Bilder, \u00dcberschriften<\/strong> und Abschnitte aneinandersto\u00dfen, und stellen sicher, dass Ihr Website-Design Raum zum Atmen hat. Sie sind grundlegend f\u00fcr das Erreichen eines ausgereiften und professionellen Layouts.<\/p>\n\nMit Elementor haben Sie unglaubliche Kontrolle \u00fcber R\u00e4nder. Sie k\u00f6nnen visuell die Gr\u00f6\u00dfe des Raums um Ihre Elemente anpassen, wodurch diese Design-Anpassungen zum Kinderspiel werden. Bevor wir jedoch zu den Anleitungen kommen, lassen Sie uns etwas tiefer in die Details der R\u00e4nder eintauchen.<\/p>\n\n
Rand vs. Innenabstand<\/em><\/strong> <\/h3>\n\nNun m\u00f6gen R\u00e4nder ihrem Verwandten, dem Innenabstand, \u00e4hnlich erscheinen, aber es gibt einen gro\u00dfen Unterschied:<\/p>\n\n
\nR\u00e4nder<\/strong> sind der transparente Raum au\u00dferhalb<\/em> der Grenze Ihres Elements.<\/li>\n\n\n\nInnenabstand<\/strong> ist der Raum innerhalb<\/em> der Grenze des Elements.<\/li>\n<\/ul>\n\nStellen Sie sich einen Briefumschlag vor. Der Rand ist der Raum zwischen dem Umschlag und anderen Briefen im Briefkasten. Der Innenabstand ist der Raum zwischen der Adresse auf dem Brief und den Kanten des Umschlags. Die Beherrschung sowohl von R\u00e4ndern als auch von Innenabst\u00e4nden gibt Ihnen pr\u00e4zise Kontrolle \u00fcber das Layout Ihrer Website.<\/p>\n\nEin 12-Spalten-Rasterlayout mit 24px breiten Zwischenr\u00e4umen und 24px R\u00e4ndern<\/figcaption><\/figure>\n\nDas CSS-Box-Modell und R\u00e4nder <\/h3>\n\n Das CSS-Box-Modell ist wie ein Bauplan daf\u00fcr, wie Elemente auf einer Webseite aufgebaut sind. Es hat drei Schl\u00fcsselschichten:<\/p>\n\n
\nInhalt:<\/strong> Der eigentliche Text, die Bilder oder Videos innerhalb des Elements.<\/li>\n\n\n\nInnenabstand:<\/strong> Der Raum innerhalb<\/em> der Grenze, wie wir gelernt haben.<\/li>\n\n\n\nRand:<\/strong> Der transparente Raum au\u00dferhalb<\/em> der Grenze.<\/li>\n<\/ol>\n\nDas Verst\u00e4ndnis dessen hilft Ihnen, zu visualisieren, wie R\u00e4nder mit anderen Layout-Elementen interagieren. Wenn Sie mit Elementen in Elementor arbeiten, k\u00f6nnen Sie oft visuelle Darstellungen des Box-Modells sehen, was es \u00e4u\u00dferst intuitiv macht, mit R\u00e4ndern zusammen mit anderen Eigenschaften zu experimentieren.<\/p>\n\n
Rand-Eigenschaften <\/h3>\n\n Lassen Sie uns nun aufschl\u00fcsseln, wie Sie tats\u00e4chlich R\u00e4nder in CSS steuern. Sie haben vier Haupteigenschaften zur Verf\u00fcgung:<\/p>\n\n
\nmargin-top:<\/strong> Legt den Raum \u00fcber dem Element fest.<\/li>\n\n\n\nmargin-right:<\/strong> Legt den Raum rechts vom Element fest.<\/li>\n\n\n\nmargin-bottom:<\/strong> Legt den Raum unter dem Element fest.<\/li>\n\n\n\nmargin-left:<\/strong> Legt den Raum links vom Element fest.<\/li>\n<\/ol>\n\nHier macht Elementor das Leben so viel einfacher \u2013 anstatt einzelne Rand-Eigenschaften auszuschreiben, haben Sie oft visuelle Schieberegler oder Eingabefelder, um jede Richtung unabh\u00e4ngig anzupassen. Dies erm\u00f6glicht es Ihnen, die Ergebnisse sofort zu sehen, was es so viel schneller macht, dieses perfekte Layout zu erzielen.<\/p>\n\n
Gehen wir zu etwas \u00fcber, das Ihnen eine Menge Tipparbeit erspart \u2013 Kurzschreibweisen!<\/p>\n\n
Kurzschreibweise-Syntax <\/h3>\n\n Die Margin-Eigenschaft ist eine Kurzschreibweise f\u00fcr die gleichzeitige Festlegung aller vier Seiten. Hier ist die Reihenfolge der Werte und was sie steuern:<\/p>\n\n
\nEin Wert:<\/strong> Wendet den gleichen Rand auf alle vier Seiten an (z.B. margin: 20px;)<\/li>\n\n\n\nZwei Werte:<\/strong> Der erste Wert legt die oberen und unteren R\u00e4nder fest, der zweite die linken und rechten (z.B. margin: 10px 30px;)<\/li>\n\n\n\nDrei Werte:<\/strong> Der erste Wert ist der obere Rand, der zweite f\u00fcr links und rechts und der dritte f\u00fcr unten (z.B. margin: 20px 15px 10px;)<\/li>\n\n\n\nVier Werte:<\/strong> Im Uhrzeigersinn von oben: oben, rechts, unten, links (z.B. margin: 10px 20px 30px 15px;)<\/li>\n<\/ul>\n\nDie Kurzschreibweise erspart Ihnen eine Menge Code und macht Ihr CSS \u00fcbersichtlicher und schlanker. Und wissen Sie was? Elementor versteht diese Kurzschreibweise! Es ist oft die Standardmethode, um R\u00e4nder im visuellen Editor anzupassen.<\/p>\n\n
Ma\u00dfeinheiten<\/h3>\n\n CSS bietet Ihnen eine Vielzahl von M\u00f6glichkeiten, wie<\/em> Sie Ihre Randgr\u00f6\u00dfen ausdr\u00fccken k\u00f6nnen. Hier sind die g\u00e4ngigsten Einheiten, die Sie verwenden werden:<\/p>\n\n\nPixel (px):<\/strong> Die unkomplizierteste Einheit, Pixel bieten R\u00e4nder mit fester Gr\u00f6\u00dfe. M\u00f6chten Sie einen Rand, der genau 20 Pixel breit ist? Nur zu!<\/li>\n\n\n\nProzents\u00e4tze (%):<\/strong> Hier wird es responsiv! Prozentuale R\u00e4nder basieren auf der Breite des \u00fcbergeordneten Containers des Elements. So erzeugt margin-left: 10%; einen linken Rand, der 10% so breit ist wie das Element, in dem es sich befindet.<\/li>\n\n\n\nem:<\/strong> Diese Einheit bezieht sich auf die Schriftgr\u00f6\u00dfe des Elements. Ein em-Wert von 1 entspr\u00e4che der aktuellen Schriftgr\u00f6\u00dfe. Dies ist praktisch f\u00fcr Abst\u00e4nde, die sich gut mit dem Text skalieren lassen.<\/li>\n\n\n\nrem:<\/strong> \u00c4hnlich wie em, aber relativ zur Schriftgr\u00f6\u00dfe des Wurzelelements. Dies bietet Konsistenz, wenn Sie m\u00f6chten, dass sich R\u00e4nder \u00fcber Ihr gesamtes Website-Layout skalieren.<\/li>\n\n\n\nViewport-Einheiten (vh, vw):<\/strong> Diese basieren auf der Gr\u00f6\u00dfe des Browserfensters. 1vh entspricht 1% der Viewport-H\u00f6he. Dies eignet sich hervorragend f\u00fcr Vollbildeffekte.<\/li>\n<\/ul>\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/margin-padding-border-content-18.gif\")
<\/figure>\n\n![\"Elementor-Blog-Layout\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/blog-with-columns.png\")