Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dom Fundamentals Part 1: Display

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

image

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

image image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.