Wenn Sie neu bei CSS (Cascading Style Sheets) sind, haben Sie wahrscheinlich schon von den Wörtern padding und margin gehört. Beide mögen gleich erscheinen, aber ihre Verwendung ist unterschiedlich. Möglicherweise wissen Sie nicht, wie Sie diese beiden in Ihren Website-Designs verwenden sollen, oder Sie möchten Ihre Designs verbessern. Lassen Sie uns lernen, was diese beiden Konzepte sind, welche Unterschiede sie haben und wie man sie verwendet. Bevor wir die Frage „Polsterung vs. Rand“ beantworten, werfen wir einen genaueren Blick auf die einzelnen Komponenten.
Was sind Polsterung und Rand?
Polsterung und Rand sind Teil eines sogenannten Box-Modells. In CSS ist alles vom Box-Modell umgeben. Jedes Feld besteht aus 4 Teilen: dem Inhaltsrand, dem Füllrand, dem Randrand und dem Randrand. So funktioniert das Box-Modell: ein Inhaltsbereich in der Mitte, um den Sie die Polsterung, um den Sie den Rand und um den Sie den Rand machen können, machen können.
Polsterung wird verwendet, um Platz um ein Element innerhalb eines Rahmens zu schaffen. Vergrößern Sie ein Element oder verkleinern Sie seinen Inhalt, um Platz zu schaffen. Sie können auch die Polsterung für alle vier Seiten des Artikels festlegen.
Padding-Verknüpfungen: Padding-Top, Padding-Right, Padding-Bottom, Padding-Left.
Der Rand ist der Abstand eines Elements zu seinen umgebenden Elementen. Der Rand liegt außerhalb von zwei Elementen. Mit anderen Worten: Der Rand schafft einen Raum außerhalb des Randes. Der Rand kann auch auf allen vier Seiten eines Artikels festgelegt werden. Mit der Margin-Funktion können Sie Leerzeichen zwischen HTML-Elementen erstellen. Randverknüpfungen: Rand oben, Rand rechts, Rand unten, Rand links.
Polsterung vs. Rand
Beide werden verwendet, um Räume zwischen Elementen zu schaffen, der Unterschied liegt jedoch in der Schaffung von Räumen. Der Rand schiebt benachbarte Elemente von sich weg; In gewisser Weise drängt es sie. Polsterung schafft Platz, indem sie ihre Größe vergrößert oder das Innenelement verkleinert.
Ränder und Polsterung sind transparent. Ein weiterer Unterschied zwischen Innenabstand und Rand besteht darin, dass Innenabstand Hintergrundbilder und Hintergrundfarben umfasst, nicht jedoch Ränder, Hintergrundbilder und Farben. Der Rand ist der Bereich außerhalb des Randes, der Raum zwischen der Polsterung, dem Rand und dem Inhalt.
Wann sollten Sie Polsterung oder Rand verwenden?
Wenn Sie Ihre Website entwerfen, müssen Sie wissen, welche Sie verwenden sollen. Sie können „Margin“ immer dann verwenden, wenn Sie ein Element auf der Seite nach oben, unten, rechts und links verschieben möchten. Zentrieren Sie ein Element horizontal auf Ihrer Seite mit einer festen Breite, indem Sie bei Bedarf den Wert für den automatischen Rand erhöhen. Sie sollten den Rand auch verwenden, wenn Sie den Abstand zwischen nahe beieinander liegenden Elementen anpassen möchten. Darüber hinaus können Sie Elemente auch überlappen, da bei der Verwendung von Rändern negative Elemente verfügbar sind.
Erwägen Sie die Verwendung von Auffüllungen, wann immer Sie Abstand zwischen einem Element und einem Rand schaffen möchten. Dabei können Sie auch den Hintergrund rund um das Element sehen. Sie können die Auffüllung auch verwenden, um die Größe eines Elements zu ändern. Wenn Sie den Abstandswert erhöhen, behält der Text die gleiche Größe, aber mit mehr Platz um ihn herum.
Häufig gestellte Fragen zu Polsterung und Rand
Wie kann ich in CSS Auffüllungen hinzufügen?
Sie können mithilfe der Eigenschaften „padding-top“, „padding-right“, „padding-bottom“ und „padding-left“ eine Polsterung um ein Element in CSS hinzufügen. Mithilfe der von Ihnen erstellten Verknüpfungen können Sie in CSS auch ganz einfach Abstände hinzufügen.
Was ist der Zweck von margin-bottom in CSS?
Die Eigenschaft margin-bottom wird verwendet, um die Ränder unter einem Artikel festzulegen. Der positive Wert entfernt sich; der negative Wert nähert sich.
Wie kann ich den automatischen Rand in CSS deaktivieren?
Sie müssen dem Header-Tag einen 1-Pixel-Rand geben und können den automatischen Rand deaktivieren, indem Sie den Textrand auf Null setzen.
Wie kann ich dem CSS-Auffüllen Farben hinzufügen?
Sie können die Hintergrundclip-Funktion und den Boxschatten verwenden, um der CSS-Auffüllung Farbe hinzuzufügen. Sie können der Polsterung auch Farbe hinzufügen, diese Funktion können Sie jedoch nicht für den Rand verwenden.
Wie kann ich in CSS einen Rand hinzufügen?
Es ist im Wesentlichen dasselbe wie das Hinzufügen von Füllstoff. Sie müssen lediglich „margin-top“, „margin-right“, „margin-bottom“ und „margin-left“ anstelle von „Füllwörtern“ verwenden. Sie können auch selbst erstellte Verknüpfungen verwenden.
Fazit zu Polsterung vs. Rand
In diesem Artikel sprechen wir darüber, was Polsterung und Rand sind, wie man sie verwendet und welche Unterschiede sie für diejenigen haben, die neu in der Gestaltung einer Website sind oder ihr Design verbessern.
Wir hoffen, wir konnten helfen. Wenn Sie es bis hierher geschafft haben, könnte für Sie auch unsere Bewertung der 10 besten Website-Designs, die wir für Sie ausgewählt haben, von Interesse sein.
