Merge pull request #4622 from codeharborhub/dev-3

added box modules

docs/css/box-model/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "Box Model",
+    "position": 5,
+    "link": {
+      "type": "generated-index",
+      "description": "In this section, you will learn about the CSS Box Model. The CSS Box Model is a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. The box model allows us to add a border around elements, and to define space between elements. The box model is used to create the layout design of a webpage."
+    }
+  }

docs/css/box-model/assets/BoxModelDiagram.css

@@ -0,0 +1,50 @@
+.box-model-diagram {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.box-model-diagram__margin {
+    background: #c2ba43c4;
+    border: 2px dashed #000;
+    padding: 10px;
+}
+
+.box-model-diagram__margin:hover {
+    background: transparent;
+}
+
+.box-model-diagram__border {
+    border: 2px solid #000;
+    margin: 10px;
+    padding: 10px 20px;
+    background: #9cf374;
+    color: #333;
+}
+
+.box-model-diagram__border:hover {
+    background: #9cf374a8;
+}
+
+.box-model-diagram__padding {    
+    margin: 10px;
+    padding: 10px 20px;
+    border: 1px dashed #000;
+    background: #9fdbb8a8;
+    color: #333;
+}
+
+.box-model-diagram__padding:hover {
+    background: #9fdbb8;
+}
+
+.box-model-diagram__content {
+    margin: 10px;
+    padding: 10px 40px;
+    border: 1px solid #000;
+    background: #4edc89;
+}
+
+.box-model-diagram__content:hover {
+    background: #4edc89a8;
+}

docs/css/box-model/intro.md

@@ -0,0 +1,81 @@
+---
+id: introdution
+title: Introduction to the CSS Box Model
+sidebar_label: Introduction
+sidebar_position: 1
+keywords: [css box model, box model, css layout, css box model introduction]
+description: Learn about the CSS box model and how it is used to layout elements on a web page.
+tags: [css, box model, css layout, css box model introduction]
+---
+
+import BoxModelDiagram from './script/BoxModelDiagram';
+
+In CSS, the **Box Model** is a fundamental concept that describes how elements are laid out on a web page. It consists of four main components: **content**, **padding**, **border**, and **margin**. Understanding the box model is essential for creating well-structured and visually appealing web layouts.
+
+<AdsComponent />
+
+The box model is used to calculate the size of an element, including its content area, padding, border, and margin. Each of these components plays a specific role in defining the layout and appearance of an element on the page.
+
+## Structure of the Box Model
+
+The box model can be visualized as a rectangular box that wraps around an element. The box consists of the following components:
+
+<BoxModelDiagram />
+
+## Components of the Box Model
+
+The four components of the box model are as follows:
+
+1. **Content**: The content area is the innermost part of the box that contains the actual content of the element, such as text, images, or other media.
+2. **Padding**: The padding is the space between the content area and the border. It provides additional space around the content, helping to create separation between the content and the border.
+3. **Border**: The border is the outer edge of the box that surrounds the content and padding. It can be styled with different colors, widths, and styles to create visual effects.
+4. **Margin**: The margin is the space outside the border that separates the element from other elements on the page. It provides spacing between elements, helping to control the layout of the page.
+5. **Width and Height**: The width and height of an element are calculated based on the content area, padding, border, and margin. The total width of an element is the sum of the content width, padding, border, and margin.
+
+## Box Model Example
+
+Let's look at an example to illustrate how the box model works. Consider the following CSS code:
+
+```css title="styles.css"
+.box {
+  width: 200px;
+  height: 100px;
+  padding: 20px;
+  border: 2px solid black;
+  margin: 10px;
+}
+```
+
+In this example, we have defined a box with a width of `200px`, height of `100px`, padding of `20px`, border of `2px`, and margin of `10px`.
+
+The total width of the box can be calculated as follows:
+
+- Content width: `200px`
+- Padding: `20px` (left) + `20px` (right) = `40px`
+- Border: `2px` (left) + `2px` (right) = `4px`
+- Margin: `10px` (left) + `10px` (right) = `20px`
+- Total width: `200px` (content) + `40px` (padding) + `4px` (border) + `20px` (margin) = `264px`
+- Total height: `100px` (content) + `40px` (padding) + `4px` (border) + `20px` (margin) = `164px`
+- Total width and height of the box: `264px` x `164px`
+- Total area of the box: `43,296px`
+- Total perimeter of the box: `952px`
+
+By understanding the box model and how it works, you can create more effective and visually appealing web layouts. The box model is a powerful tool that allows you to control the size, spacing, and appearance of elements on a web page.
+
+In the next sections, we will explore each component of the box model in more detail and learn how to use them effectively in your CSS layouts.
+
+<AdsComponent />
+
+:::info Key Points
+
+- The CSS Box Model consists of four main components: **content**, **padding**, **border**, and **margin**.
+- The box model is used to calculate the size of an element, including its content area, padding, border, and margin.
+- Each component of the box model plays a specific role in defining the layout and appearance of an element on the page.
+- Understanding the box model is essential for creating well-structured and visually appealing web layouts.
+- The width and height of an element are calculated based on the content area, padding, border, and margin.
+
+:::
+
+## Conclusion
+
+The CSS Box Model is a fundamental concept that describes how elements are laid out on a web page. By understanding the box model and how it works, you can create more effective and visually appealing web layouts. Each component of the box model plays a specific role in defining the layout and appearance of an element on the page. In the next sections, we will explore each component of the box model in more detail and learn how to use them effectively in your CSS layouts.

docs/css/box-model/script/BoxModelDiagram.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import '../assets/BoxModelDiagram.css';
+
+const BoxModelDiagram = () => {
+  return (
+    <div className="box-model-diagram">
+      <div className="box-model-diagram__margin">
+          Margin
+          {/* Border */}
+          <div className="box-model-diagram__border">
+            Border
+            {/* Padding */}
+            <div className="box-model-diagram__padding">
+              Padding
+              {/* Content */}
+              <div className="box-model-diagram__content">
+                Content
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+  );
+}
+
+export default BoxModelDiagram;