25. Block-level elementen
• Staan op hun eigen regel
• CSS width geldt voor de content
• Geen CSS width? Element neemt alle beschikbare
breedte in.
• Geen CSS height? Element neemt hoogte in van
zijn content
• width:auto ≠ width:100%
• Gebruik margin om horizontaal te centreren of
rechts uit te lijnen
• Collapsing margins: als verticale margins elkaar
raken, verdwijnt de kleinste margin
26. Inline elementen
• Links en rechts kan inhoud van andere elementen
verschijnen. Ze verschijnen dus op dezelfde
tekstregel als andere (inline) elementen.
• Kan je breedte noch hoogte geven
• Kan je margin-top noch margin-bottom geven
• De breedte wordt bepaald door de content
• De hoogte (en margin-top of margin-bottom) wordt
bepaald door font-size, line-height en vertical-align
27. Maak een inline element block-level
en een block-level element inline
display:inline;
display:block;
29. display:inline-block
• Net als inline elementen kan er content van andere
elementen links en rechts van het inline-block
element verschijnen.
• Anders dan inline elementen: je kan width en
height geven (de volledige regel beweegt dan mee).
• Anders dan inline elementen: je kan margin-top en
margin-bottom geven.
• Net als block-level elementen: CSS width geldt voor
de content.
• Gebruik vertical-align om verticaal uit te lijnen.
30. Spaties in code zorgen voor spaties
tussen inline-block elementen
<ul>
<li>Appelen</li>
<li>Peren</li>
<li>Citroenen</li>
</ul>