diff --git a/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md b/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
index fba2e3ed11cceca..5c7eb37b7b3f417 100644
--- a/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
+++ b/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
@@ -12,8 +12,7 @@ Normal Flow is defined in the [CSS 2.1 specification](https://www.w3.org/TR/CSS2
The behavior of elements which have a block or inline formatting context is also defined in this specification. For elements with a block formatting context, the spec says:
-> "In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.\
-> In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch)." - 9.4.1
+> "In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse. In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch)." - 9.4.1
For elements with an inline formatting context:
@@ -35,15 +34,89 @@ In this guide, we will be working in English and therefore a horizontal writing
As defined in the specification, the margins between two block boxes are what creates separation between the elements. We see this with a very simple layout of two paragraphs, to which I have added a border. The default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom.
-{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}
+```html live-sample___normal-flow
+
+
+ One November night in the year 1782, so the story runs, two brothers sat
+ over their winter fire in the little French town of Annonay, watching the
+ grey smoke-wreaths from the hearth curl up the wide chimney. Their names
+ were Stephen and Joseph Montgolfier, they were papermakers by trade, and
+ were noted as possessing thoughtful minds and a deep interest in all
+ scientific knowledge and new discovery.
+
+
+ Before that night—a memorable night, as it was to prove—hundreds of millions
+ of people had watched the rising smoke-wreaths of their fires without
+ drawing any special inspiration from the fact.”
+
+
+
+ One November night in the year 1782, so the story runs, two brothers sat
+ over their winter fire in the little French town of Annonay, watching the
+ grey smoke-wreaths from the hearth curl up the wide chimney. Their names
+ were Stephen and Joseph Montgolfier, they were papermakers by trade, and
+ were noted as possessing thoughtful minds and a deep interest in all
+ scientific knowledge and new discovery.
+
+
+ Before that night—a memorable night, as it was to prove—hundreds of millions
+ of people had watched the rising smoke-wreaths of their fires without
+ drawing any special inspiration from the fact.”
+
+
+
+ One November night in the year 1782, so the story runs, two brothers sat
+ over their winter fire in the little French town of Annonay, watching the
+ grey smoke-wreaths from the hearth curl up the wide chimney. Their names
+ were Stephen and Joseph Montgolfier, they were papermakers by trade, and
+ were noted as possessing thoughtful minds and a deep interest in all
+ scientific knowledge and new discovery.
+
+
+ Before that night—a memorable night, as it was to prove—hundreds of millions
+ of people had watched the rising smoke-wreaths of their fires without
+ drawing any special inspiration from the fact.”
+
+
+
+ One November night in the year 1782, so the story runs, two brothers sat
+ over their winter fire in the little French town of Annonay, watching the
+ grey smoke-wreaths from the hearth curl up the wide chimney. Their names
+ were Stephen and Joseph Montgolfier, they were papermakers by trade, and
+ were noted as possessing thoughtful minds and a deep interest in all
+ scientific knowledge and new discovery.
+
+
+ Before that night—a memorable night, as it was to prove—hundreds of millions
+ of people had watched the rising smoke-wreaths of their fires without
+ drawing any special inspiration from the fact.”
+
+
+ Before that night—a memorable night, as it was to
+ prove—hundreds of millions of people had watched the rising smoke-wreaths of
+ their fires without drawing any special inspiration from the fact.”
+
+```
-The boxes around the words before the `` element and after the `` element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly.
+{{EmbedLiveSample("inline")}}
-The line box size in the block direction (so the height when working in English) is defined by the tallest box inside it. In the next example, the `` element is 300%; since that content spans two lines, it now defines the height of the line boxes of those two lines.
+The boxes around the words before and after the `` element are referred to as **anonymous boxes** - boxes introduced to ensure that everything is wrapped in a box, but are boxes that we cannot target directly.
-{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}
+The line box size in the block direction (the height when working in English) is defined by the tallest box inside it. In the next example, the `` element is 300%; since that content spans two lines, it now defines the height of the line boxes of those two lines.
+
+```html live-sample___line-box
+
+ Before that night—a memorable night, as it was to
+ prove—hundreds of millions of people had watched the rising smoke-wreaths of
+ their fires without drawing any special inspiration from the fact.”
+
+```
+
+```css live-sample___line-box
+strong {
+ font-size: 300%;
+}
+```
+
+{{EmbedLiveSample("line-box")}}
Find out more about how Block and Inline Boxes behave in our Guide to the [Visual Formatting Model](/en-US/docs/Web/CSS/Visual_formatting_model).
@@ -84,7 +204,29 @@ The display type of an element defines the outer display type; this dictates how
The flex items however are participating in a flex formatting context, because their parent is the element with `display: flex`, which has an inner display type of `flex`, establishing the flex formatting context for the direct children.
-{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}
+```html live-sample___flex
+
+
Flex Item
+
Flex Item
+
+
Children
+
are in
+
normal flow
+
+
+ Before that night—a memorable night, as it was to
+ prove—hundreds of millions of people had watched the rising smoke-wreaths of
+ their fires without drawing any special inspiration from the fact.”
+
+```
+
+```css live-sample___change-formatting
+strong {
+ display: block;
+}
+```
+
+{{EmbedLiveSample("change-formatting")}}
## Summary