102 Layout Box model Content flow Positioning Weirdness

box model

box model content box < padding box < border box < margin box

box model clockwise from the top top right bottom left img { margin: 10px 5px 0px 20px; }

content box determined by text or fixed size p { font-size: 14pt; line-height: 1.5; font-family: "Helvetica Neue"; } img { width: 300px; height: 150px; }

padding box adds a gap between content and border, makes it easier to click elements button { padding: 20px; }

border box width, style, color header { border: 8px solid gold; }

adds a gap between border and other boxes img { margin: 25px; } margin box

content flow

1. Left to right 2. Top to bottom

Floats: easy to abuse, better to avoid Useful mostly for images in a blog post Absolute/fixed positioning: Choose the top, right, bottom, or left distance from a container or viewport. Take it out of the flow

positioning X/Y axis: left to right, top to bottom Reference: static, fixed, relative, absolute

weirdness Negative margin Overlapping z-index Cut off overflow