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 13

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

## Slide 14

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

## Slide 16

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

## Slide 18

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

## Slide 21

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

## Slide 22

MDN contributors. “display”. MDN Web Docs, 14 July 2025, https://developer.mozilla.org/en-US/docs/Web/CSS/display. Accessed 27 July 2025.

Licensed CC BY-SA 2.5: https://creativecommons.org/licenses/by-sa/2.5/.

Atkins, Tab Jr., and Elika J. Etemad. CSS Display Module Level 3. W3C Candidate Recommendation Snapshot, 9 May 2025, World Wide Web Consortium (W3C), https://drafts.csswg.org/css-display-3/. Accessed 27 July 2025.

## Slide 23

MDN contributors. “display”. MDN Web Docs, 14 July 2025, https://developer.mozilla.org/en-US/docs/Web/CSS/display. Accessed 27 July 2025.

Licensed CC BY-SA 2.5: https://creativecommons.org/licenses/by-sa/2.5/.

## 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;. Accessed 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. Accessed 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;. Accessed 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. Accessed 19 Mar 2023.

## Slide 28

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

## Slide 29

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

## Slide 30

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

## Slide 31

WebSanity. “CSS Layout: Block Layout - HTML & CSS”. CodePen, 28 Sep 2022, https://codepen.io/websanity/pen/eYrVNPa?editors=1000. Accessed 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. Accessed 27 Sep 2022.

## Slide 33

WebSanity. “Boxes: block examples”. CodePen, 16 Sep 2016, http://codepen.io/websanity/pen/wzWgKz?editors=1100. Accessed 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. Accessed 27 Sep 2022.

## Slide 35

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

## Slide 37

MDN contributors. “display”. MDN Web Docs, 29 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/display. Accessed 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;. Accessed 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. Accessed 29 Feb 2024.

## Slide 39

WebSanity. “CSS Layout: Inline Layout”. CodePen, 5 July 2020, https://codepen.io/websanity/full/wYJdgr/. Accessed 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. Accessed 27 Sep 2022.

## Slide 41

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

## Slide 42

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

## Slide 44

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. Accessed 27 Sep 2022.

## Slide 45

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. Accessed 27 Sep 2022.

## Slide 46

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

## Slide 48

Why the change? Categorizing everything as block-level or inline wasn’t really accurate & was way too limiting, especially as HTML got more complex, so it was abandoned (that said, block & inline are used in CSS, where they are very important, but not as a way to categorize HTML)

## Slide 49

Diagram of HTML content categories, including Flow, Phrasing, Embedded, Interactive, Metadata, Heading, and Sectioning, from section 3.2.5.2 “Kinds of content.” HTML Living Standard, edited by Anne van Kesteren et al., WHATWG, last updated 25 July 2025, https://html.spec.whatwg.org/multipage/dom.html. Accessed 27 July 2025.

## Slide 51

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

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

## Slide 52

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