Dom Fundamentals Part 1: Display

dom-fundamentals.md

Dom Fundamentals Part 1: Display

Repo:

https://github.com/mikermcneil/dom-fundamentals

Normal flow and display:inline

• display:inline things work like text
• <img> elements are technically display:inline by default. But that's dumb
• To center a display:inline element, put text-align:center on the parent
• width and height don't work on display:inline things (except for <img>, but that's special)

Normal flow: the "textiness" of the DOM -- the way in which it's like a Word doc: https://docs.google.com/document/d/1Kv4XZel4GACX2Pwi1bIs9KMlX6zMo2-O7q_NVyahvm8/edit

display: block

• it takes up a whole like, row on its own
• it always gets busted onto the next line
• you center it differently

display: inline-block

• like display:inline
• except that width and height actually work even if it's not an image
• you center it just like display:inline things
• like display:inline, but by default if you don't set a width/height, it stretches to fit the contents
• basically it's in the normal flow

what about vertical centering? aka "middling"?

• if the thing you're trying to center is just text only, that text doesn't wrap, and the element is a set height, then you can set a line-height of that set height and vertical-align:middle; on the element (or parent). (This is good for e.g. buttons)
• otherwise, to vertically center arbitrary shit with a variable height, you can use display: table-cell and use display:table on the parent.

Next time

Next time: we'll talk about flexbox and when it'd be worth it to use that