CSS-Layout

CSS-Layout

Es ist sehr wichtig, das CSS-Layout zu verstehen, da es uns hilft, einen Rahmen um unseren Inhalt zu setzen und seine Position und seinen Abstand in Bezug auf den Ausgabebildschirm zu verwalten. Jedes unserer HTML-Elemente hat die folgenden CSS-Eigenschaften bezüglich des Layouts:

  • Grenze
  • Polsterung
  • Marge

Grenze

Wie der Name schon sagt, ist es die durchgezogene Linie direkt außerhalb Ihres Elements. Um diese Konzepte besser zu verstehen, habe ich die Hintergrundfarbe des Körpers unseres vorherigen Beispiels in Schwarz geändert.
Jetzt fügen wir CSS hinzu, um den Rahmen zu aktivieren:

CSS-Rahmen

Ausgang:

CSS-Randausgabe

Polsterung

Im obigen Beispiel sehen Sie, dass die Texte zu nah am Rand sind, daher müssen wir etwas Platz zwischen dem Rand und dem Inhalt hinzufügen. Diese Leerzeichen werden Auffüllen genannt. Der Inhalt, für den ein Abstand erforderlich ist, wird mit Zwischenräumen versehen. Dies wird am folgenden Beispiel deutlicher:

Beispiel:

CSS-Padding

Im obigen Beispiel haben wir für alle Inhalts-Tags Padding hinzugefügt, d , und . Hier haben wir gerade padding-left verwendet, wodurch nur auf der linken Seite des Inhalts Platz hinzugefügt wird. Durch einfaches Hinzufügen von Padding werden um den Inhalt herum Leerzeichen hinzugefügt, was wir hier nicht wollten.

Ausgang:

CSS-Padding-Ausgabe

Marge

Im Gegensatz zum Auffüllen wird der Abstand außerhalb eines Elements in Bezug auf den UI-Bildschirm hinzugefügt. Wenn wir im obigen Beispiel einen Abstand auf der linken Seite des Rahmens hinzufügen müssen, handelt es sich um einen Rand. Dies wird am gegebenen Beispiel deutlicher:

Beispiel:

CSS-Marge

Im obigen Code haben wir einen Rand direkt außerhalb des Rands hinzugefügt, und der Rand ist für hier markieren. Wir haben nur auf der linken Seite einen Rand hinzugefügt, der 30% der Gesamtbreite des Bildschirms beträgt. Es bringt den Inhalt irgendwo in die Mitte des Bildschirms, wie unten gezeigt:

CSS-Randausgabe

Übersicht über das CSS-Layout

Wenn wir den Rand, den Rahmen und die Auffüllung für ein Element zusammenführen, sieht es ungefähr so ​​aus wie im folgenden Bild:

CSS-Layout

Hinterlassen Sie eine Nachricht

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.