CSS: move block-level and inline-level pages from HTML to CSS

files/en-us/_redirects.txt

@@ -3631,7 +3631,9 @@
 /en-US/docs/Glossary/XForm	/en-US/docs/Glossary/XForms
 /en-US/docs/Glossary/XHR_(XMLHttpRequest)	/en-US/docs/Glossary/XMLHttpRequest
 /en-US/docs/Glossary/XSS	/en-US/docs/Glossary/Cross-site_scripting
+/en-US/docs/Glossary/block-level	/en-US/docs/Glossary/Block-level_content
 /en-US/docs/Glossary/entities	/en-US/docs/Glossary/Entity
+/en-US/docs/Glossary/inline-level	/en-US/docs/Glossary/Inline-level_content
 /en-US/docs/Glossary/l10n	/en-US/docs/Glossary/Localization
 /en-US/docs/Glossary/q_values	/en-US/docs/Glossary/Quality_values
 /en-US/docs/Glossarybandwidth	/en-US/docs/Glossary/Bandwidth
@@ -3640,7 +3642,7 @@
 /en-US/docs/HTML	/en-US/docs/Web/HTML
 /en-US/docs/HTML/Attributes	/en-US/docs/Web/HTML/Attributes
 /en-US/docs/HTML/Bad_copy_pasting_habits	/en-US/docs/Learn/HTML/Introduction_to_HTML
-/en-US/docs/HTML/Block-level_elements	/en-US/docs/Web/HTML/Block-level_elements
+/en-US/docs/HTML/Block-level_elements	/en-US/docs/Glossary/Block-level_content
 /en-US/docs/HTML/CORS_Enabled_Image	/en-US/docs/Web/HTML/CORS_enabled_image
 /en-US/docs/HTML/CORS_settings_attributes	/en-US/docs/Web/HTML/Attributes/crossorigin
 /en-US/docs/HTML/Canvas	/en-US/docs/Web/API/Canvas_API
@@ -3916,7 +3918,7 @@
 /en-US/docs/HTML/HTML_Elements/tr	/en-US/docs/Web/HTML/Element/tr
 /en-US/docs/HTML/HTML_Elements/track	/en-US/docs/Web/HTML/Element/track
 /en-US/docs/HTML/Historical_artifacts_to_avoid	/en-US/docs/Learn/HTML/Introduction_to_HTML
-/en-US/docs/HTML/Inline_elements	/en-US/docs/Web/HTML/Inline_elements
+/en-US/docs/HTML/Inline_elements	/en-US/docs/Glossary/Inline-level_content
 /en-US/docs/HTML/Intro	/en-US/docs/Learn/HTML/Introduction_to_HTML
 /en-US/docs/HTML/Introduction	/en-US/docs/Learn/HTML/Introduction_to_HTML
 /en-US/docs/HTML/Introduction_to_HTML5	/en-US/docs/Learn/HTML
@@ -3930,7 +3932,7 @@
 /en-US/docs/HTML/WebVTT	/en-US/docs/Web/API/WebVTT_API
 /en-US/docs/HTML/aside	/en-US/docs/Web/HTML/Element/aside
 /en-US/docs/HTML/tag	/en-US/docs/Web/HTML/Element
-/en-US/docs/HTML:Block-level_elements	/en-US/docs/Web/HTML/Block-level_elements
+/en-US/docs/HTML:Block-level_elements	/en-US/docs/Glossary/Block-level_content
 /en-US/docs/HTML:Canvas	/en-US/docs/Web/API/Canvas_API
 /en-US/docs/HTML:Element	/en-US/docs/Web/HTML/Element
 /en-US/docs/HTML:Element:a	/en-US/docs/Web/HTML/Element/a
@@ -3977,7 +3979,7 @@
 /en-US/docs/HTML:Element:strong	/en-US/docs/Web/HTML/Element/strong
 /en-US/docs/HTML:Element:tt	/en-US/docs/Web/HTML/Element/tt
 /en-US/docs/HTML:Element:ul	/en-US/docs/Web/HTML/Element/ul
-/en-US/docs/HTML:Inline_elements	/en-US/docs/Web/HTML/Inline_elements
+/en-US/docs/HTML:Inline_elements	/en-US/docs/Glossary/Inline-level_content
 /en-US/docs/HTML:The_Importance_of_Correct_Commenting	/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments
 /en-US/docs/HTML:tag	/en-US/docs/Web/HTML/Element
 /en-US/docs/HTMLElement.forceSpellCheck	/en-US/docs/Web/HTML/Global_attributes/spellcheck
@@ -12018,6 +12020,7 @@
 /en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API	/en-US/docs/Web/API/Page_Visibility_API
 /en-US/docs/Web/Guide/Using_FormData_Objects	/en-US/docs/Web/API/FormData/Using_FormData_Objects
 /en-US/docs/Web/HTML/Applying_color	/en-US/docs/Web/CSS/CSS_Colors/Applying_color
+/en-US/docs/Web/HTML/Block-level_elements	/en-US/docs/Glossary/Block-level_content
 /en-US/docs/Web/HTML/CORS_settings_attributes	/en-US/docs/Web/HTML/Attributes/crossorigin
 /en-US/docs/Web/HTML/Canvas	/en-US/docs/Web/API/Canvas_API
 /en-US/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas	/en-US/docs/Web/API/Canvas_API/Tutorial
@@ -12069,8 +12072,8 @@
 /en-US/docs/Web/HTML/Focus_management_in_HTML	/en-US/docs/Web/API/Document/hasFocus
 /en-US/docs/Web/HTML/Forms_in_HTML	/en-US/docs/Learn/Forms
 /en-US/docs/Web/HTML/Index	/en-US/docs/Web/HTML
-/en-US/docs/Web/HTML/Inline_elemente	/en-US/docs/Web/HTML/Inline_elements
-/en-US/docs/Web/HTML/Inline_elmements	/en-US/docs/Web/HTML/Inline_elements
+/en-US/docs/Web/HTML/Inline_elemente	/en-US/docs/Glossary/Inline-level_content
+/en-US/docs/Web/HTML/Inline_elmements	/en-US/docs/Glossary/Inline-level_content
 /en-US/docs/Web/HTML/Introduction	/en-US/docs/Learn/HTML/Introduction_to_HTML
 /en-US/docs/Web/HTML/Kinds_of_HTML_content	/en-US/docs/Web/HTML/Content_categories
 /en-US/docs/Web/HTML/Link_types	/en-US/docs/Web/HTML/Attributes/rel

files/en-us/_wikihistory.json

@@ -1209,6 +1209,49 @@
     "modified": "2020-02-14T12:40:39.391Z",
     "contributors": ["Sheppy", "Andrew_Pfeiffer"]
   },
+  "Glossary/Block-level_content": {
+    "modified": "2020-11-09T07:00:09.444Z",
+    "contributors": [
+      "mfuji09",
+      "chrisdavidmills",
+      "gerfolder",
+      "puddlejumper26",
+      "FranklinYu",
+      "SelenIT",
+      "jswisher",
+      "sideshowbarker",
+      "zhuangyin",
+      "wilhelmtell",
+      "ishasaran",
+      "jmmarco",
+      "dgca",
+      "rudijuri",
+      "SphinxKnight",
+      "masonwu311",
+      "ktajpuri",
+      "teoli",
+      "rawrmonstar",
+      "robhudson",
+      "technoAri",
+      "vjdhama",
+      "RylanH",
+      "rufusbuck77",
+      "appsforartists",
+      "artcygn",
+      "rogerxas",
+      "limyvhood7676",
+      "Sheppy",
+      "mccary",
+      "asharpe",
+      "wjinca",
+      "Jeremie",
+      "trevorh",
+      "Ms2ger",
+      "sorinelpusti",
+      "Mgjbot",
+      "PablO"
+    ]
+  },
   "Glossary/Block/CSS": {
     "modified": "2019-03-23T22:57:29.004Z",
     "contributors": [
@@ -2983,6 +3026,42 @@
       "sushant1221"
     ]
   },
+  "Glossary/Inline-level_content": {
+    "modified": "2020-06-11T07:42:16.601Z",
+    "contributors": [
+      "gerfolder",
+      "therefromhere",
+      "gonfalons",
+      "FranklinYu",
+      "calamityAdam",
+      "SelenIT",
+      "mfuji09",
+      "dolorismachina",
+      "PamPierce",
+      "CITguy",
+      "sideshowbarker",
+      "zhuangyin",
+      "nkas17",
+      "Sheppy",
+      "gminovska",
+      "rudijuri",
+      "JDurston",
+      "teoli",
+      "jswisher",
+      "MHLut",
+      "maddy49",
+      "thedigitalman",
+      "rogerxas",
+      "asharpe",
+      "gnumanth",
+      "Jeremie",
+      "AndreLDM",
+      "keoki.zee",
+      "Mgjbot",
+      "Gilchris",
+      "PablO"
+    ]
+  },
   "Glossary/Input_method_editor": {
     "modified": "2019-04-06T20:54:00.458Z",
     "contributors": ["mfuji09", "wbamberg"]
@@ -93568,49 +93647,6 @@
       "estelle"
     ]
   },
-  "Web/HTML/Block-level_elements": {
-    "modified": "2020-11-09T07:00:09.444Z",
-    "contributors": [
-      "mfuji09",
-      "chrisdavidmills",
-      "gerfolder",
-      "puddlejumper26",
-      "FranklinYu",
-      "SelenIT",
-      "jswisher",
-      "sideshowbarker",
-      "zhuangyin",
-      "wilhelmtell",
-      "ishasaran",
-      "jmmarco",
-      "dgca",
-      "rudijuri",
-      "SphinxKnight",
-      "masonwu311",
-      "ktajpuri",
-      "teoli",
-      "rawrmonstar",
-      "robhudson",
-      "technoAri",
-      "vjdhama",
-      "RylanH",
-      "rufusbuck77",
-      "appsforartists",
-      "artcygn",
-      "rogerxas",
-      "limyvhood7676",
-      "Sheppy",
-      "mccary",
-      "asharpe",
-      "wjinca",
-      "Jeremie",
-      "trevorh",
-      "Ms2ger",
-      "sorinelpusti",
-      "Mgjbot",
-      "PablO"
-    ]
-  },
   "Web/HTML/CORS_enabled_image": {
     "modified": "2020-11-03T13:26:20.578Z",
     "contributors": [
@@ -99917,42 +99953,6 @@
       "linfestus"
     ]
   },
-  "Web/HTML/Inline_elements": {
-    "modified": "2020-06-11T07:42:16.601Z",
-    "contributors": [
-      "gerfolder",
-      "therefromhere",
-      "gonfalons",
-      "FranklinYu",
-      "calamityAdam",
-      "SelenIT",
-      "mfuji09",
-      "dolorismachina",
-      "PamPierce",
-      "CITguy",
-      "sideshowbarker",
-      "zhuangyin",
-      "nkas17",
-      "Sheppy",
-      "gminovska",
-      "rudijuri",
-      "JDurston",
-      "teoli",
-      "jswisher",
-      "MHLut",
-      "maddy49",
-      "thedigitalman",
-      "rogerxas",
-      "asharpe",
-      "gnumanth",
-      "Jeremie",
-      "AndreLDM",
-      "keoki.zee",
-      "Mgjbot",
-      "Gilchris",
-      "PablO"
-    ]
-  },
   "Web/HTML/Microdata": {
     "modified": "2020-09-06T05:55:47.630Z",
     "contributors": [

files/en-us/glossary/block-level_content/index.md

@@ -0,0 +1,45 @@
+---
+title: Block-level content
+slug: Glossary/Block-level_content
+page-type: glossary-definition
+---
+
+In CSS, content that participates in block layout is called **block-level content**.
+
+In a block layout, boxes are laid out one after the other, vertically, beginning at the top of a containing block. Each box's left outer edge touches the left edge of the containing block.\
+A block-level element always starts on a new line. In horizontal writing modes, like English or Arabic, it occupies the entire horizontal space of its parent element (container) and vertical space equal to the height of its contents, thereby creating a "block".
+
+> **Note:** The above behaviour of block layout changes if the containing block's [`writing-mode`](/en-US/docs/Web/CSS/writing-mode) is set to value other than [the default value](/en-US/docs/Web/CSS/writing-mode#formal_definition).
+
+> **Note:** HTML (_HyperText Markup Language_) elements historically were categorized as either "block-level" elements or "inline-level" elements. As a presentational characteristic, this is now specified by CSS.
+
+## Examples
+
+In this example, two paragraph ({{HTMLElement("p")}}) elements are put in a {{HTMLElement("div")}}.
+
+```html
+<div>
+  <p>
+    This the first paragraph. The background color of these paragraphs have been
+    colored to distinguish them from their parent element.
+  </p>
+  <p>This is the second paragraph.</p>
+</div>
+```
+
+The paragraph({{HTMLElement("p")}}) elements are block-level by default. That is why they are displayed in block layout:
+
+```css hidden
+p {
+  background-color: #8abb55;
+}
+```
+
+{{EmbedLiveSample("Examples")}}
+
+## See also
+
+- [Inline-level content](/en-US/docs/Glossary/Inline-level_content)
+- [Block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context)
+- {{cssxref("display")}}
+- [`writing-mode`](/en-US/docs/Web/CSS/writing-mode)

files/en-us/glossary/inline-level_content/index.md

@@ -0,0 +1,46 @@
+---
+title: Inline-level content
+slug: Glossary/Inline-level_content
+page-type: glossary-definition
+---
+
+In CSS, content that participates in inline layout is called **inline-level content**. Most text sequences, replaced elements, and generated content are inline-level by default.
+
+In inline layout, a mixed stream of text, [replaced elements](/en-US/docs/Web/CSS/Replaced_element), and other inline boxes are laid out by fragmenting them into a stack of line boxes. Within each line box, inline-level boxes are aligned to each other vertically or horizontally, depending on the writing mode. Typically, they are aligned by the baselines of their text. This can be changed with CSS.
+
+![inline layout](inline_layout.png)
+
+> **Note:** HTML (_HyperText Markup Language_) elements historically were categorized as either "block-level" elements or "inline-level" elements. As a presentational characteristic, this is now specified by CSS.
+
+## Examples
+
+```html
+<p>
+  This span is an <span class="highlight">inline-level element</span>; its
+  background has been colored to display both the beginning and end of the
+  element's influence. Input elements, like <input type="radio" /> and
+  <input type="checkbox" />, are also inline-level content.
+</p>
+```
+
+In this example, the {{HTMLElement("p")}} element contains some text. Within that text is a {{HTMLElement("span")}} element and two {{HTMLElement("input")}} elements, which are inline-level elements. If the `<span>` is spread across two lines, two line boxes are generated. Because these elements are inline, the paragraph correctly renders as a single paragraph of unbroken text flow:
+
+```css hidden
+body {
+  margin: 0;
+  padding: 4px;
+  border: 1px solid #333;
+}
+
+.highlight {
+  background-color: #ee3;
+}
+```
+
+{{EmbedLiveSample("Examples")}}
+
+## See also
+
+- [Block-level content](/en-US/docs/Glossary/Block-level_content)
+- [Inline formatting context](/en-US/docs/Web/CSS/Inline_formatting_context)
+- {{cssxref("display")}}

files/en-us/learn/css/css_layout/normal_flow/index.md

@@ -39,7 +39,9 @@ Before digging deeper into different layout methods, it's worth revisiting some
 
 The process begins as the boxes of individual elements are laid out in such a way that any padding, border, or margin they happen to have is added to their content. This is what we call the **box model**.
 
-By default, a [block level element](/en-US/docs/Web/HTML/Block-level_elements)'s content fills the available inline space of the parent element containing it and the element grows along the block dimension to accommodate its content. The size of [inline elements](/en-US/docs/Web/HTML/Inline_elements) is just the size of their content. You can set width or height on some inline elements, like an `img` tag but its display property will still remain `inline`. If you want to control the `display` property of an inline element in this manner, you need to set it to behave like a block level element (e.g., with `display: block;` or `display: inline-block;`, which mixes characteristics from both).
+By default, a [block-level element](/en-US/docs/Glossary/Block-level_content)'s content fills the available inline space of the parent element containing it, growing along the block dimension to accommodate its content. The size of [inline-level elements](/en-US/docs/Glossary/Inline-level_content) is just the size of their content. You can set {{cssxref("width")}} or {{cssxref("height")}} on some elements that have a default {{cssxref("display")}} property value of `inline`, like {{HTMLElement("img")}}, but `display` value will still remain `inline`.
+
+If you want to control the `display` property of an inline-level element in this manner, use CSS to set it to behave like a block-level element (e.g., with `display: block;` or `display: inline-block;`, which mixes characteristics from both).
 
 That explains how elements are structured individually, but how about the way they're structured when they interact with one another? The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block-level elements are laid out in the _block flow direction_, which is based on the parent's [writing mode](/en-US/docs/Web/CSS/writing-mode) (_initial_: horizontal-tb). Each element will appear on a new line below the last one, with each one separated by whatever margin that's been specified. In English, for example, (or any other horizontal, top to bottom writing mode) block-level elements are laid out vertically.
 

files/en-us/learn/html/introduction_to_html/getting_started/index.md

@@ -212,33 +212,6 @@ The following is an example of the _wrong_ way to do nesting:
 
 The **tags have to open and close in a way that they are inside or outside one another**. With the kind of overlap in the example above, the browser has to guess at your intent. This kind of guessing can result in unexpected results.
 
-### Block versus inline elements
-
-There are two important categories of elements to know in HTML: block-level elements and inline elements.
-
-- Block-level elements form a visible block on a page. A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line. Block-level elements are usually structural elements on the page. For example, a block-level element might represent headings, paragraphs, lists, navigation menus, or footers. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.
-- Inline elements are contained within block-level elements, and surround only small parts of the document's content (not entire paragraphs or groupings of content). An inline element will not cause a new line to appear in the document. It is typically used with text, for example an {{htmlelement("a")}} element creates a hyperlink, and elements such as {{htmlelement("em")}} or {{htmlelement("strong")}} create emphasis.
-
-Consider the following example:
-
-```html
-<em>first</em><em>second</em><em>third</em>
-
-<p>fourth</p>
-<p>fifth</p>
-<p>sixth</p>
-```
-
-{{htmlelement("em")}} is an inline element. As you see below, the first three elements sit on the same line, with no space in between. On the other hand, {{htmlelement("p")}} is a block-level element. Each _p_ element appears on a new line, with space above and below. (The spacing is due to default [CSS styling](/en-US/docs/Learn/CSS/First_steps) that the browser applies to paragraphs.)
-
-{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}
-
-> **Note:** HTML5 redefined the element categories: see [Element content categories](https://html.spec.whatwg.org/multipage/indices.html#element-content-categories). While these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than _block_ and _inline._ This article will stay with these two terms.
-
-> **Note:** The terms _block_ and _inline_, as used in this article, should not be confused with [the types of CSS boxes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes) that have the same names. While the names correlate by default, changing the CSS display type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in. One reason HTML5 dropped these terms was to prevent this rather common confusion.
-
-> **Note:** Find useful reference pages that include lists of block and inline elements. See [Block-level elements](/en-US/docs/Web/HTML/Block-level_elements) and [Inline elements](/en-US/docs/Web/HTML/Inline_elements).
-
 ### Void elements
 
 Not all elements follow the pattern of an opening tag, content, and a closing tag. Some elements consist of a single tag, which is typically used to insert/embed something in the document. Such elements are called {{glossary("void element", "void elements")}}. For example, the {{htmlelement("img")}} element embeds an image file onto a page:

files/en-us/web/api/domparser/index.md

@@ -23,7 +23,7 @@ Note that {{domxref("XMLHttpRequest")}} can parse XML and HTML directly
 from a URL-addressable resource, returning a `Document` in its
 {{domxref("XMLHttpRequest.response", "response")}} property.
 
-> **Note:** Be aware that [block-level elements](/en-US/docs/Web/HTML/Block-level_elements)
+> **Note:** Be aware that [block-level elements](/en-US/docs/Glossary/Block-level_content)
 > like `<p>` will be automatically closed if another
 > block-level element is nested inside and therefore parsed before the closing `</p>` tag.