From 47f5a20ceb31addb71774c0fab961654c7c2a5a7 Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Thu, 27 Nov 2025 21:11:20 +0530 Subject: [PATCH 1/2] Update CSS Layout docs --- docs/css/layout/display-flow.mdx | 105 ++++++++++++++++++++- docs/css/layout/display/block.mdx | 69 +++++++++++++- docs/css/layout/display/inline-block.mdx | 63 ++++++++++++- docs/css/layout/display/inline.mdx | 59 +++++++++++- docs/css/layout/display/none.mdx | 84 ++++++++++++++++- docs/css/layout/display/visibility.mdx | 68 +++++++++++++- docs/css/layout/float-and-clear.mdx | 96 ++++++++++++++++++- docs/css/layout/overflow.mdx | 91 +++++++++++++++++- docs/css/layout/position/absolute.mdx | 71 +++++++++++++- docs/css/layout/position/fixed.mdx | 79 +++++++++++++++- docs/css/layout/position/relative.mdx | 74 ++++++++++++++- docs/css/layout/position/static.mdx | 72 ++++++++++++++- docs/css/layout/position/sticky.mdx | 88 +++++++++++++++++- docs/css/layout/position/z-index.mdx | 113 ++++++++++++++++++++++- 14 files changed, 1118 insertions(+), 14 deletions(-) diff --git a/docs/css/layout/display-flow.mdx b/docs/css/layout/display-flow.mdx index e345ed2..b8bdece 100644 --- a/docs/css/layout/display-flow.mdx +++ b/docs/css/layout/display-flow.mdx @@ -1 +1,104 @@ - \ No newline at end of file +--- +title: "The Normal Document Flow" +description: "A comprehensive summary of the Normal Document Flow (or Display Flow) in CSS, detailing how block and inline elements interact and set the foundation for all modern layouts." +keywords: [CSS Normal Flow, Document Flow, Block Flow, Inline Flow, Layout, Box Model, Display property summary] +tags: [CSS Normal Flow, Document Flow, Block Flow, Inline Flow, Layout, Box Model, Display property summary] +sidebar_label: "Normal Flow Summary" +--- + +The **Normal Document Flow** (or just **Normal Flow**) is the default behavior of every element on a web page. It defines how the browser arranges HTML elements based on their type, content, and the order in which they appear in the source code. + +Every element you use—a `
`, a `

`, a ``, or an ``—is initially positioned according to these rules. All CSS layout properties (`position`, `float`, `flex`, `grid`) are essentially tools to manipulate or deviate from this default flow. + + +
+ +## 1. Block Flow vs. Inline Flow + +The Normal Flow is governed by the two primary display types: + +### A. Block-Level Flow (Vertical Stacking) + +Block elements define structure and content sections. They flow vertically, one after the other. + +* **Characteristics:** + 1. Always starts on a new line. + 2. Takes up the full width of the parent container by default. + 3. Respects all Box Model properties (`margin`, `padding`, `width`, `height`). + +* **Flow Example:** Imagine stacking building blocks one on top of the other. + +```html title="styles.css" + +

First Block
+
Second Block
+

Third Block (A paragraph)

+``` + +### B. Inline-Level Flow (Horizontal Wrapping) + +Inline elements flow horizontally alongside text and other inline elements. They are designed to stay within the line established by their parent block. + + * **Characteristics:** + + 1. Does **not** start on a new line; sits on the same line as surrounding content. + 2. Width and height are determined solely by the content (explicit `width` and `height` are ignored). + 3. Respects horizontal spacing (`padding-left`, `margin-right`) but ignores vertical margins (`margin-top`, `margin-bottom`). + + * **Flow Example:** Imagine words and punctuation flowing across a line of text in a book. + +```html +

+ This text is Inline and + This link is also Inline. They flow together. +

+``` + + +
+ +## 2. The Role of `display: inline-block` + +The `inline-block` value creates a hybrid element that follows the rules of both flows: + + * **External Flow (Inline):** The element flows horizontally and sits next to other elements on the same line. + * **Internal Behavior (Block):** The element fully respects `width`, `height`, and all four margins/padding values, making it a predictable box. + +:::tip Use Case +`inline-block` is typically used for simple horizontal alignment (like old-school navigation menus) where you need to control the size of the box while keeping them on the same line. However, for most modern layouts, **Flexbox** is the preferred tool for horizontal flow. +::: + +## 3. Manipulating the Flow (The Transition to Layout) + +When you introduce CSS layout properties, you are actively telling the browser to take elements *out* of the Normal Flow or change the way the flow behaves. + +| Property/Value | How it Affects the Flow | +| :--- | :--- | +| **`position: absolute`** | **Removes** the element entirely from the flow. Surrounding content collapses. | +| **`float: left / right`** | **Removes** the element from the flow, but allows surrounding content (text) to wrap around it. | +| **`display: flex`** | **Changes** the flow rules for the children. They now follow **Flex Flow** (a one-dimensional directional flow). | +| **`display: grid`** | **Changes** the flow rules for the children. They now follow **Grid Flow** (a two-dimensional cell-based flow). | + + +
+ +## 4. Why Does the Flow Matter? + +Understanding the Normal Flow helps you debug layout issues quickly. + +### Debugging Collapse + +If a background color or border on a parent element suddenly collapses, it's often because a child element was removed from the flow (using `position: absolute` or `float`), and the parent no longer recognizes its height. + +### Debugging Spacing + +If you try to set `margin-top` on a `` and it doesn't move, it's because the element is *inline*, and inline elements ignore vertical margins in the Normal Flow. You would need to change it to `display: block` or `display: inline-block` to make those margins work. + +## Interactive Summary Demo + +This demo illustrates the behavior of the three main `display` types in one container. + + \ No newline at end of file diff --git a/docs/css/layout/display/block.mdx b/docs/css/layout/display/block.mdx index e345ed2..e8c8807 100644 --- a/docs/css/layout/display/block.mdx +++ b/docs/css/layout/display/block.mdx @@ -1 +1,68 @@ - \ No newline at end of file +--- +title: "Display block" +description: "Learn the behavior of block-level elements in CSS, including how they occupy full width, stack vertically, and fully respect all Box Model properties." +keywords: [CSS display block, block element behavior, full width, stacking, box model, layout, CodeHarborHub] +tags: [CSS display block, block element behavior, full width, stacking, box model, layout] +sidebar_label: "block" +--- + +The `display: block` value is one of the three fundamental values of the CSS `display` property, defining how an element interacts with the rest of the layout. + +Elements that default to `display: block` are known as **block-level elements**. They are designed to structure the main content of a page, such as paragraphs, headers, lists, and sections. + + +
+ +## Key Characteristics of Block Elements + +Block elements follow three strict rules that govern their behavior in the document flow: + +### 1. Takes Full Available Width + +By default, a block element will automatically stretch horizontally to occupy $100\%$ of the width of its parent container, regardless of how much content is inside it. + +### 2. Starts on a New Line + +A block element always begins on a new line, effectively pushing any content or elements that came before it onto the previous line. They naturally stack vertically. + +### 3. Respects Box Model Properties + +Block elements fully respect all components of the Box Model: +* **`width` and `height`:** Can be explicitly set (e.g., `width: 200px;`). +* **`margin` and `padding`:** All four sides (`top`, `right`, `bottom`, `left`) are fully applied and affect the flow. + +## Common Block-Level Elements + +The following HTML elements default to `display: block`: + +* `
` (The generic container) +* `

` (Paragraph) +* `

` through `

` (Headings) +* `