• Thema

  • Technologie

Das CSS Boxmodell für doofe InDesigner wie mich

Wer HTML hübsch machen will, braucht CSS. Und somit ein Grundverständnis dieser mächtigen Formatierungssprache. Objekte werden in CSS über das “Box Model” manipuliert. Lange Zeit konnte ich mir das Box Model nicht wirklich vorstellen, bis ich mir das Ding in InDesign nachgebaut habe (siehe Grafik oben).

CSS “Box Model”

Vergleiche die InDesign-Einstellungen im Screenshot oben:

  1. Content
  2. Padding
  3. Border
  4. Margin (wobei “Margin” nicht mit dem “Floating”, der eigentlichen “Konturenführung” zu verwechseln ist)

 

Grafik: Wikipedia

Im Code

Im CSS Code könnte dies dann wie folgt aussehen:

Über mich

  • Haeme Ulrich

    Ich bin Business Leadership Coach und konzentriere mich auf Verlage und Agenturen. Ich habe Hunderte von Verlagen und Agenturen weltweit betreut und ihnen geholfen, ihre Prozesse zu optimieren und eine blühende Kultur zu etablieren. Ich bin ein versierter Redner, spreche auf Bühnen mit mehr als 5000 Zuhörern sowie vor Hochschul- und Fachpublikum. Mein Stil ist authentisch, ehrlich und direkt, wobei dein Erfolg immer im Vordergrund steht. Ich lege mehr Wert darauf, meinen Kunden beim Aufbau langfristiger, nachhaltiger Geschäfte zu helfen, als nur auf kurzfristige Gewinne zu achten.

Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
Das könnte dich auch interessieren:
Ad - SiteGround Webhosting - Einfache Site-Verwaltung. Mehr erfahren.
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
Diskussion

2 Antworten

  1. Gute Erklärung mit einem kleinen Haken: Dieses «Box-model» entspricht nicht ganz den offiziellen W3C-Spezifikationen; Padding und Border würden hierbei zum Content hinzugefügt werden.
    Wenn du die Kontur innen ausrichtest und in deinem CSS-Code noch die Definition «box-sizing: border-box;» einfügst, würde das dann ziemlich genau stimmen. 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

  • Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.