Zuviel Markup

[Rolf B]

Hallo heinetz,

Codepen a) ist falsch, da sind die divs nicht paarig. Aber das Extradiv kann man entfernen ohne das Ergebnis zu verändern.

Ansonsten sehe ich zwischen a) und c) keinen Unterschied.

Was ich angesichts der Demo-Eigenschaft ignoriere:

• ein <h2> hat als Textinhalt "Content" - Was denn nun? Heading oder Content 😀
• Größenangaben in Pixel, das gehört sich nicht, das ist nicht responsiv.

Worauf ich hinweisen möchte:

• in c) ist ein - für die Demo - unnötiges position:relative und margin-bottom:10px
• display:block ist für divs nicht nötig
• mutmaßlich sind divs nicht das Markup der Wahl, aber das weiß man erst wenn man den Kontext sieht, in dem das nachher landet.
• Du hast magic numbers - die max-width der Kind-Elemente sind aus der width des Eltern-Elements berechnet. Vorschlag: lass CSS rechnen. Gib dem Eltern-Element width:320px und padding:0 40px (also, eigentlich NICHT px, sondern irgendwas sinnvolles in em), und dem Kind-div einfach width:100%. Wenn Du die width des Eltern-Elements lieber auf die echte Breite setzen willst, dann mach width:400px und box-sizing:border-box;
• die Texte deiner h2 Elemente kleben am oberen Rand. Das liegt daran, dass der margin von h2 aus der Box hinausragt - ein div erzeugt keinen Block Formatting Context (BFC). Das kannst Du in den Entwicklerwerkzeugen des Browsers schön sehen. Du könntest das äußere Element auf display:flex; flex-direction:column setzen. Die inneren divs sind dann Flex-Items, die bilden einen BFC und der Margin der h2 bleibt innerhalb des Flex-Items. Statt dessen kannst Du auch das overflow:hidden nutzen, das Du im Pen c) stehen hast, der baut auch einen BFC. Das hängt aber von deinem Usercase ab, was hier richtig ist.

Bei c) und d) sehe ich nur den Unterschied, dass in d) die Margins des Content 1 fehlen, aber die hast Du ja auch nicht gesetzt.

Also - eigentlich ist deine Aufgabe doch von Dir gelöst - da ist kein unnötiges Markup mehr. Vielleicht die falschen Elemente, aber wie gesagt: das kann man erst bei Kenntnis des Usecase richtig stellen.

Rolf