Notes for Block & Inline

By Scott Granneman & Jans Carton

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

## Slide 2

Slides: https://granneman.com/downloads/web-dev/Block-Inline.pdf

Notes: https://granneman.com/downloads/web-dev/Block-Inline.txt

## Slide 3

https://www.granneman.com/presentations/all-presentations

## Slide 5

Granneman, Scott. “1st day of 2nd grade”. 16 Aug 2016. Author’s personal collection.

## Slide 15

WebSanity. “Boxes: parent/child relationships”. CodePen, 30 June 2020, http://codepen.io/websanity/pen/pEbPEg?editors=1100. Web. 28 Sep 2023.

## Slide 16

WebSanity. “Boxes: parent/child relationships”. CodePen, 30 June 2020, http://codepen.io/websanity/pen/pEbPEg?editors=1100. Web. 28 Sep 2023.

## Slide 18

WebSanity. “Boxes: sibling relationships”. CodePen, 30 June 2020, http://codepen.io/websanity/pen/LRkOmP?editors=1000. Web. 27 Sep 2022.

## Slide 20

WebSanity. “Boxes: sibling relationships”. CodePen, 30 June 2020, http://codepen.io/websanity/pen/LRkOmP?editors=1000. Web. 27 Sep 2022.

## Slide 23

WebSanity. “CSS: Boxes inside boxes inside boxes”. CodePen, 16 Sep 2016, http://codepen.io/websanity/pen/amkOaG?editors=1100. Web. 27 Sep 2022.

## Slide 24

MDN contributors. “Visual formatting model”. MDN Web Docs, 29 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model;. Web. 29 Feb. 2024.

## Slide 26

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

MDN contributors. “display”. MDN Web Docs, 29 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/display. Web. 29 Feb 2024.

MDN contributors. “Visual formatting model”. MDN Web Docs, 29 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model;. Web. 29 Feb. 2024.

## Slide 27

Hickson, Ian et al. “15.3 Non-replaced elements”. WHATWG, HTML Living Standard, 19 Mar 2023, https://html.spec.whatwg.org/multipage/rendering.html#non-replaced-elements. Web. 19 Mar 2023.

## Slide 28

WebSanity. “CSS Layout: Block Layout”. CodePen, 14 July 2020, https://codepen.io/websanity/full/pxePLQ/. Web. 27 Sep 2022.

## Slide 29

WebSanity. “CSS Layout: Block Layout”. CodePen, 14 July 2020, https://codepen.io/websanity/full/pxePLQ/. Web. 27 Sep 2022.

## Slide 30

WebSanity. “CSS Layout: Block Layout - HTML & CSS”. CodePen, 28 Sep 2022, https://codepen.io/websanity/pen/eYrVNPa?editors=1000. Web. 28 Sep 2022.

## Slide 31

WebSanity. “CSS Layout: Block Layout - HTML & CSS”. CodePen, 28 Sep 2022, https://codepen.io/websanity/pen/eYrVNPa?editors=1000. Web. 28 Sep 2022.

## Slide 32

Note that <small> is actually inline, so why is it displaying like a block (100% width & lining up vertically)? Because I have this CSS:
h1 small {
  display: block;
}
WebSanity. “Boxes: block examples”. CodePen, 16 Sep 2016, http://codepen.io/websanity/pen/wzWgKz?editors=1100. Web. 27 Sep 2022.

## Slide 33

WebSanity. “Boxes: block examples”. CodePen, 16 Sep 2016, http://codepen.io/websanity/pen/wzWgKz?editors=1100. Web. 27 Sep 2022.

## Slide 34

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

WebSanity. “Boxes: block examples”. CodePen, 16 Sep 2016, http://codepen.io/websanity/pen/wzWgKz?editors=1100. Web. 27 Sep 2022.

## Slide 35

WebSanity. “Boxes: block examples”. CodePen, 16 Sep 2016, http://codepen.io/websanity/pen/wzWgKz?editors=1100. Web. 27 Sep 2022.

## Slide 37

MDN contributors. “display”. MDN Web Docs, 29 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/display. Web. 29 Feb 2024.

MDN contributors. “Visual formatting model”. MDN Web Docs, 29 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model;. Web. 29 Feb. 2024.

MDN contributors. “Inline-level content”. MDN Web Docs, 8 June 2023, https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content. Web. 29 Feb 2024.

## Slide 39

WebSanity. “CSS Layout: Inline Layout”. CodePen, 5 July 2020, https://codepen.io/websanity/full/wYJdgr/. Web. 14 Jan 2024.

## Slide 40

WebSanity. “CSS: inline boxes break & continue across lines”. CodePen, 3 Dec 2018, https://codepen.io/websanity/pen/GOpQWJ?editors=1100. Web. 27 Sep 2022.

## Slide 41

WebSanity. “CSS: display: inline - all boxes are inline by default”. CodePen, 19 Mar 2023, https://codepen.io/websanity/pen/QWVVyLB?editors=1100. Web. 19 Mar 2023.

## Slide 43

Note that <small> is actually inline, but it displays like a block (100% width & lining up vertically) because of a CSS style rule you can’t see here (but you can if you go to CodePen)

WebSanity. “Boxes: inline examples”. CodePen, 12 July 2020, http://codepen.io/websanity/pen/dpXvWv?editors=1100. Web. 27 Sep 2022.

## Slide 44

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

WebSanity. “Boxes: inline examples”. CodePen, 12 July 2020, http://codepen.io/websanity/pen/dpXvWv?editors=1100. Web. 27 Sep 2022.

## Slide 45

WebSanity. “CSS Layout: Block & Inline”. CodePen, 14 Mar 2023, https://codepen.io/websanity/full/jOvzmvv. Web. 14 Mar 2023.

## Slide 47

Slides: https://granneman.com/downloads/web-dev/Block-Inline.pdf

Notes: https://granneman.com/downloads/web-dev/Block-Inline.txt

## Slide 48

https://www.granneman.com/presentations/all-presentations