Notes for Block & Inline

By Scott Granneman & Jans Carton

Find the presentation at http://www.granneman.com/presentations/

## Slide 3

Finny & Daddy on the 1st day of 2nd grade, August 16, 2016

## Slide 9

http://codepen.io/websanity/pen/pEbPEg?editors=1100

## Slide 10

http://codepen.io/websanity/pen/pEbPEg?editors=1100

## Slide 12

http://codepen.io/websanity/pen/LRkOmP?editors=1000 

## Slide 14

http://codepen.io/websanity/pen/LRkOmP?editors=1000 

## Slide 17

http://codepen.io/websanity/pen/amkOaG?editors=1100

## Slide 18

https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model

## Slide 20

Note: Strictly speaking, these are block-level boxes AND a block box

## Slide 22

Note that <small> is actually inline, so why is it displaying like a block (100% width & lining up vertically)?

http://codepen.io/websanity/pen/wzWgKz?editors=1100

## Slide 23

http://codepen.io/websanity/pen/wzWgKz?editors=1100

## Slide 24

My CSS told the rendering engine to display <small> like a block (100% width & lining up vertically)

http://codepen.io/websanity/pen/wzWgKz?editors=1100

## Slide 25

http://codepen.io/websanity/pen/wzWgKz?editors=1100

## Slide 28

https://codepen.io/websanity/pen/GOpQWJ?editors=1100

## Slide 31

Note that <small> is actually inline, but it displays like a block (100% width & lining up vertically)

http://codepen.io/websanity/pen/dpXvWv?editors=1100 

## Slide 32

My CSS told the rendering engine to display <small> like a block (100% width & lining up vertically)

http://codepen.io/websanity/pen/dpXvWv?editors=1100