`) that has a defined `width` using the `auto` value for the left and right margins.
+
+When you set `margin-left` and `margin-right` to `auto`, the browser divides the remaining horizontal space equally between them, pushing the element to the center.
+
+```css title="styles.css"
+.center-box {
+ width: 600px;
+ /* Top and Bottom margin set to 30px, Left and Right margin set to auto */
+ margin: 30px auto;
+}
+```
+
+## Interactive `margin` Demo
+
+Use the live editor to adjust the margins on the blue box. Note that the total space it occupies expands outward, pushing the surrounding elements away.
+
+
\ No newline at end of file
diff --git a/docs/css/box-model/outline.mdx b/docs/css/box-model/outline.mdx
index e345ed2..de8f03b 100644
--- a/docs/css/box-model/outline.mdx
+++ b/docs/css/box-model/outline.mdx
@@ -1 +1,109 @@
-
\ No newline at end of file
+---
+title: "The outline Property"
+description: "Learn about the CSS outline property, which draws a line outside the border of an element, often used for accessibility and visual focus indication."
+keywords: [CSS outline, outline property, outline-style, outline-width, outline-color, accessibility, focus state, box model, CodeHarborHub]
+tags: [CSS outline, outline property, outline-style, outline-width, outline-color, accessibility, focus state, box model]
+sidebar_label: outline
+---
+
+The **`outline`** property is often confused with `border`, but it serves a fundamentally different purpose and behaves uniquely. An outline is a line drawn **outside** the element's border, designed primarily to help users identify the element that currently has keyboard focus.
+
+:::info Key Differences from `border`:
+
+1. **Placement:** The outline is drawn *outside* the `border`, and it does **not** take up space in the document layout. It is drawn on top of other content if necessary.
+2. **Layout Impact:** Because the outline does not occupy layout space, it **does not affect the position** of other elements or the size of the Box Model.
+3. **Default Use:** Outlines are critical for **accessibility**, as browsers automatically display them on elements like links and form fields when they receive keyboard focus (`:focus` state).
+
+:::
+
+
+
+
+## The `outline` Shorthand
+
+Like `border`, the `outline` property is a shorthand that defines the width, style, and color of the outline in a single declaration.
+
+```css title="styles.css"
+selector {
+ outline:
;
+}
+```
+
+### Example
+
+```css title="styles.css"
+.focus-button:focus {
+ /* 4px wide, dashed line, blue color */
+ outline: 4px dashed #007bff;
+ /* Add some space between border and outline */
+ outline-offset: 2px;
+}
+```
+
+## Longhand Properties
+
+For more specific control, you can use the individual properties:
+
+### 1. `outline-width`
+
+Sets the thickness of the outline. Values are the same as `border-width`.
+
+### 2. `outline-style` (Mandatory)
+
+Defines the style of the line. It uses the same values as `border-style` (`solid`, `dotted`, `dashed`, etc.). If this is not set, no outline will appear.
+
+### 3. `outline-color`
+
+Sets the color of the outline.
+
+### 4. `outline-offset` (Unique to Outline)
+
+This property controls the amount of space between the element's **border** and the start of the **outline**. This gap is transparent.
+
+```css title="styles.css"
+.input-field:focus {
+ outline-style: solid;
+ outline-width: 2px;
+ outline-color: #f44336; /* Red outline */
+ outline-offset: 3px; /* Gap of 3px between the border and the outline */
+}
+```
+
+
+
+
+## The Accessibility Warning (`outline: none;`)
+
+While setting `outline: none;` might seem tempting to remove the default, sometimes ugly, focus ring from buttons and links, **this is generally a bad practice for accessibility.**
+
+Keyboard users (who cannot use a mouse or trackpad) rely entirely on the focus outline to know which element they are currently interacting with.
+
+:::warning **Best Practice**
+Never use `outline: none;` without providing an alternative visual focus indicator, such as styling the `:focus` state with a custom `border` or a better-styled `outline`.
+:::
+
+```css title="styles.css"
+/* BAD Practice - Removes focus indicator completely */
+a:focus {
+ outline: none;
+}
+
+/* GOOD Practice - Replaces the default outline with a better-looking one */
+a.custom-link:focus {
+ outline: 2px solid #673ab7; /* Custom purple outline */
+ outline-offset: 2px;
+ border-radius: 4px; /* Optional: adds a nice touch */
+}
+```
+
+
+
+
+## Interactive `outline` Demo
+
+Click inside the text input box below, then press the Tab key to shift focus to the button. Observe how the outline appears **outside** the border without changing the layout.
+
+
\ No newline at end of file
diff --git a/docs/css/box-model/padding.mdx b/docs/css/box-model/padding.mdx
index e345ed2..9dc4b3b 100644
--- a/docs/css/box-model/padding.mdx
+++ b/docs/css/box-model/padding.mdx
@@ -1 +1,82 @@
-
\ No newline at end of file
+---
+title: "The padding Property"
+description: "Learn how the CSS padding property controls the inner space between an element's content and its border, and how it affects the element's background."
+keywords: [CSS padding, padding property, inner spacing, content-to-border space, box model, CodeHarborHub]
+tags: [CSS padding, padding property, inner spacing, content-to-border space, box model]
+sidebar_label: padding
+---
+
+The **`padding`** property defines the inner space between an element's content and its border. It is the third layer of the CSS Box Model, sitting directly inside the border and surrounding the content area.
+
+The key distinction from `margin` is that the element's **background color or background image extends into the padding area**, making padding part of the element's visible space.
+
+
+
+
+## Syntax and Shorthands
+
+Similar to `margin`, `padding` is a shorthand property that allows you to set the padding on all four sides (top, right, bottom, left) using 1, 2, 3, or 4 values, or by using individual longhand properties.
+
+### 1. The `padding` Shorthand
+
+| Syntax | Description |
+| :--- | :--- |
+| `padding: 15px;` | Sets all four sides (top, right, bottom, left) to $15\text{px}$. |
+| `padding: 10px 20px;` | Sets top/bottom to $10\text{px}$, and left/right to $20\text{px}$. |
+| `padding: 10px 20px 5px;` | Sets top to $10\text{px}$, left/right to $20\text{px}$, and bottom to $5\text{px}$. |
+| `padding: 10px 20px 5px 30px;` | Sets padding in **T**op, **R**ight, **B**ottom, **L**eft order (clockwise). |
+
+### 2. Longhand Properties
+
+For setting individual sides:
+
+* `padding-top`
+* `padding-right`
+* `padding-bottom`
+* `padding-left`
+
+```css title="styles.css"
+/* Example using longhand properties */
+.button {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+}
+```
+
+## Padding and Total Size
+
+As discussed in the introduction to the Box Model, `padding` directly affects the element's total size, unless you use `box-sizing: border-box;`.
+
+### **Default Behavior (`content-box`)**
+
+If you use `box-sizing: content-box` (the default), adding padding will **increase the total width and height** of the element.
+
+ * `width: 200px;` + `padding: 20px;` = Total visual width of $240\text{px}$.
+
+### **Recommended Behavior (`border-box`)**
+
+If you use `box-sizing: border-box`, adding padding will **reduce the size of the content area** but keep the total element size fixed.
+
+ * `width: 200px;` + `padding: 20px;` = Total visual width remains $200\text{px}$.
+
+It is almost always recommended to use `border-box` for predictable layout management.
+
+
+
+
+## Practical Use Cases for Padding
+
+1. **Readability:** Adding horizontal padding to text containers prevents lines of text from running right up against the edge of the screen or container, greatly improving readability.
+2. **Touch Targets:** Increasing the padding around interactive elements (like buttons or links) makes the clickable area larger, improving accessibility and usability on touch devices.
+3. **Visual Balance:** Padding is essential for creating visual balance and "white space" around content blocks, separating them visually from the border.
+
+## Interactive `padding` Demo
+
+Use the live editor to adjust the padding on the blue box. Observe how the content moves inward and the blue background area expands outward, without moving the red margin boundary.
+
+
\ No newline at end of file
diff --git a/docs/css/box-model/width.mdx b/docs/css/box-model/width.mdx
index e345ed2..6a60b7e 100644
--- a/docs/css/box-model/width.mdx
+++ b/docs/css/box-model/width.mdx
@@ -1 +1,62 @@
-
\ No newline at end of file
+---
+title: "The width Property"
+description: "Explore the CSS width property, how it defines the size of an element's content box, and the importance of min-width and max-width for responsive design."
+keywords: [CSS width, min-width, max-width, content size, block level, responsive width, box model, CodeHarborHub]
+tags: [CSS width, min-width, max-width, content size, block level, responsive width, box model]
+sidebar_label: width
+---
+
+The **`width`** property controls the horizontal dimension of the innermost layer of the Box Model: the **Content Area**. By default, the value you set for `width` determines the horizontal space available for the element's content, *before* horizontal padding and borders are added (under `box-sizing: content-box`).
+
+
+
+
+## Block vs. Inline Element Behavior
+
+The `width` property's behavior depends on the element's default `display` type:
+
+### 1. Block-Level Elements (`