CSS

Understanding flow

Display types

• inline
• inline-block
• block
• none
• flex (IE 11+)
• grid (not well supported yet)
• float can also be considered a display type but is controlled from the float property
  

inline

• Inlines next to other inline/inline-block elements
  Tags such as b, i, span
• Will not respond to height or width values being set
• Vertical padding is problematic (will overflow to elements in the next line)
• Cannot have vertical margin
• Line height will be the tallest element in it. All will align to line base.

inline-block

• Will inline next to other inline/inline-block elements
• img tag is kinda like that (although devtools will tell you otherwise)
• Will respond to height/width/padding/margin correctly

block

• Create a new line, ending the line before
• Inline elements coming after will start in a new line
• Not all elements can contain other elements (try styling an h1 inside a p)
• You can place block elements inside inline elements as of HTML5 but it’s not necessarily a good idea

flex

• Offers great layout tools that solve problems with previous layout techniques
• Viewport centering
• Portrait/landscape agnostic
• Ability to change elements order easily
• IE11 +

grid

• Works great with flex to create modern web layouts
• IE11 +

End