Skip to content

Commit d8826b6

Browse files
ajay-dhangarajay-dhangar
committed
added box modules
1 parent a6f5757 commit d8826b6

File tree

3 files changed

+466
-0
lines changed

3 files changed

+466
-0
lines changed

‎docs/css/box-model/box-sizing.md

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
id: box-sizing
3+
title: CSS Box Sizing
4+
sidebar_label: Box Sizing
5+
sidebar_position: 2
6+
keywords: [css box sizing, box sizing, css box model, css box model box sizing]
7+
description: Learn how the CSS `box-sizing` property can be used to control the sizing behavior of elements in the CSS box model.
8+
tags: [css, box sizing, css box model, css box model box sizing]
9+
---
10+
11+
In CSS, the `box-sizing` property is used to control the sizing behavior of elements in the CSS box model. By default, the size of an element is calculated based on its content area, padding, and border. However, the `box-sizing` property allows you to change this behavior and include the padding and border in the total width and height of the element.
12+
13+
<AdsComponent />
14+
15+
## Syntax
16+
17+
The syntax for the `box-sizing` property is as follows:
18+
19+
```css title="index.css"
20+
selector {
21+
box-sizing: value;
22+
}
23+
```
24+
25+
- `selector`: The element to which the box sizing is applied.
26+
- `box-sizing`: The CSS property used to control the sizing behavior of the element.
27+
- `value`: Specifies the sizing behavior of the element. It can take one of the following values:
28+
- `content-box`: The default value. The width and height of the element are calculated based on the content area only.
29+
- `border-box`: The width and height of the element include the padding and border, but not the margin.
30+
31+
The default value of the `box-sizing` property is `content-box`.
32+
33+
## Example
34+
35+
In the following example, the `box-sizing` property is used to set the sizing behavior of a `<div>` element to `border-box`, which includes the padding and border in the total width and height of the element:
36+
37+
```css title="index.css"
38+
div {
39+
box-sizing: border-box;
40+
width: 200px;
41+
padding: 20px;
42+
border: 1px solid black;
43+
}
44+
```
45+
46+
In the HTML code below, the CSS rule will apply the `border-box` sizing behavior to the `<div>` element, resulting in a total width of `200px` including the padding and border:
47+
48+
```html title="index.html"
49+
<div></div>
50+
```
51+
52+
In this example, the total width of the `<div>` element will be `200px`, including the padding and border, due to the `border-box` value of the `box-sizing` property.
53+
54+
<AdsComponent />
55+
56+
:::note Try it yourself
57+
Experiment with different values of the `box-sizing` property to see how the sizing behavior of elements changes based on the box model.
58+
59+
:::
60+
61+
## Example for Box Sizing
62+
63+
### Example 1: Using `content-box`
64+
65+
In this example, the `box-sizing` property is set to `content-box`, which calculates the width and height of the element based on the content area only:
66+
67+
<Tabs>
68+
<TabItem value="HTML" label="index.html">
69+
70+
```html title="index.html"
71+
<!DOCTYPE html>
72+
<html lang="en">
73+
<head>
74+
<link rel="stylesheet" href="index.css">
75+
<title>Box Sizing Example</title>
76+
</head>
77+
<body>
78+
<div></div>
79+
</body>
80+
</html>
81+
```
82+
83+
</TabItem>
84+
<TabItem value="CSS" label="index.css">
85+
86+
```css title="index.css"
87+
div {
88+
box-sizing: content-box;
89+
width: 200px;
90+
padding: 20px;
91+
border: 1px solid black;
92+
}
93+
```
94+
95+
</TabItem>
96+
</Tabs>
97+
98+
Now, you can see the output of the above code in the Browser Window like this:
99+
100+
<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000" }}>
101+
<div style={{boxSizing: "content-box", width: "200px", padding: "20px", border: "1px solid black"}}></div>
102+
</BrowserWindow>
103+
104+
In this example, the total width of the `<div>` element will be `242px`, calculated as `200px` for the width, `20px` for the left padding, `20px` for the right padding, and `1px` for the left and right borders, due to the `content-box` value of the `box-sizing` property.
105+
106+
<AdsComponent />
107+
108+
### Example 2: Using `border-box`
109+
110+
In this example, the `box-sizing` property is set to `border-box`, which includes the padding and border in the total width and height of the element:
111+
112+
<Tabs>
113+
<TabItem value="HTML" label="index.html">
114+
115+
```html title="index.html"
116+
<!DOCTYPE html>
117+
<html lang="en">
118+
<head>
119+
<link rel="stylesheet" href="index.css">
120+
<title>Box Sizing Example</title>
121+
</head>
122+
<body>
123+
<div></div>
124+
</body>
125+
</html>
126+
```
127+
128+
</TabItem>
129+
130+
<TabItem value="CSS" label="index.css">
131+
132+
```css title="index.css"
133+
div {
134+
box-sizing: border-box;
135+
width: 200px;
136+
padding: 20px;
137+
border: 1px solid black;
138+
}
139+
```
140+
141+
</TabItem>
142+
</Tabs>
143+
144+
Now, you can see the output of the above code in the Browser Window like this:
145+
146+
<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000" }}>
147+
<div style={{boxSizing: "border-box", width: "200px", padding: "20px", border: "1px solid black"}}></div>
148+
</BrowserWindow>
149+
150+
In this example, the total width of the `<div>` element will be `200px`, including the padding and border, due to the `border-box` value of the `box-sizing` property.
151+
152+
By using the `box-sizing` property, you can control how the width and height of elements are calculated in the CSS box model, allowing you to create more predictable and consistent layouts in your web pages.
153+
154+
:::tip
155+
The `box-sizing` property is particularly useful when working with responsive web design, as it helps maintain the integrity of the layout when resizing elements or adjusting padding and borders.
156+
:::
157+
158+
## Conclusion
159+
160+
The `box-sizing` property in CSS allows you to control the sizing behavior of elements in the CSS box model. By setting the `box-sizing` property to `border-box`, you can include the padding and border in the total width and height of an element, making it easier to create consistent and predictable layouts in your web pages. Experiment with different values of the `box-sizing` property to see how they affect the sizing of elements and improve the responsiveness of your web designs.

‎docs/css/box-model/margin.md

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
id: margin
3+
title: CSS Margin
4+
sidebar_label: Margin
5+
sidebar_position: 3
6+
keywords:
7+
[
8+
css margin,
9+
margin property,
10+
css margin property,
11+
css spacing,
12+
margin shorthand,
13+
margin values,
14+
]
15+
description: Learn how to use the CSS margin property to create space around elements in your web page layout.
16+
tags: [css, margin, css margin, margin property, css margin property]
17+
---
18+
19+
In CSS, the `margin` property is used to create space around elements in your web page layout. Margins are the transparent spaces outside the border of an element that separate it from other elements on the page. By adjusting the margin values, you can control the spacing between elements and create visually appealing layouts.
20+
21+
<AdsComponent />
22+
23+
## Syntax
24+
25+
The syntax for the `margin` property is as follows:
26+
27+
```css title="index.css"
28+
selector {
29+
margin: value;
30+
}
31+
```
32+
33+
- `selector`: The element to which the margin is applied.
34+
- `margin`: The CSS property used to set the margin around an element.
35+
- `value`: Specifies the margin values for the top, right, bottom, and left sides of the element. It can take one of the following forms:
36+
- `<length>`: Specifies a fixed margin value in pixels (e.g., `10px`).
37+
- `<percentage>`: Specifies a margin value as a percentage of the width of the containing element.
38+
- `auto`: Adjusts the margin to automatically distribute the space between elements.
39+
- `initial`: Sets the margin to its default value.
40+
- `inherit`: Inherits the margin value from the parent element.
41+
- `unset`: Resets the margin to its inherited value if it inherits from its parent, or to its initial value if not.
42+
43+
The `margin` property can be set using one of the following shorthand values:
44+
45+
- `margin: value;`: Sets the same margin value for all four sides.
46+
- `margin: vertical horizontal;`: Sets the vertical margin (top and bottom) and horizontal margin (left and right) to different values.
47+
- `margin: top right bottom left;`: Sets individual margin values for the top, right, bottom, and left sides.
48+
- `margin: initial;`: Sets the margin to its default value.
49+
- `margin: inherit;`: Inherits the margin value from the parent element.
50+
- `margin: unset;`: Resets the margin to its inherited value if it inherits from its parent, or to its initial value if not.
51+
- `margin-top: value;`: Sets the margin value for the top side.
52+
- `margin-right: value;`: Sets the margin value for the right side.
53+
- `margin-bottom: value;`: Sets the margin value for the bottom side.
54+
- `margin-left: value;`: Sets the margin value for the left side.
55+
- `margin-block-start: value;`: Sets the margin value for the block-start side (top margin in horizontal writing mode).
56+
- `margin-block-end: value;`: Sets the margin value for the block-end side (bottom margin in horizontal writing mode).
57+
58+
The default value of the `margin` property is `0`, which means no margin is applied to the element.
59+
60+
## Example
61+
62+
In the following example, the `margin` property is used to set the margin around a `<div>` element to `20px` on all sides:
63+
64+
```css title="index.css"
65+
div {
66+
margin: 20px;
67+
}
68+
```
69+
70+
In the HTML code below, the CSS rule will apply the `20px` margin to the `<div>` element:
71+
72+
```html title="index.html"
73+
<div>This is a div element with a 20px margin around it.</div>
74+
```
75+
76+
By adjusting the margin values, you can control the spacing between elements and create visually appealing layouts in your web page design.
77+
78+
<AdsComponent />
79+
80+
:::info Additional Information
81+
82+
**Margin Values:**
83+
84+
- Margins are the transparent spaces around elements that separate them from other elements on the page.
85+
- The `margin` property is used to set the margin around an element.
86+
- Margin values can be specified in pixels, percentages, or using the `auto`, `initial`, `inherit`, or `unset` keywords.
87+
- The default value of the `margin` property is `0`, which means no margin is applied to the element.
88+
- The `margin` property can be set using shorthand values or individual properties for each side.
89+
- By adjusting the margin values, you can control the spacing between elements and create visually appealing layouts in your web page design.
90+
- Margins are part of the CSS box model and are used to create space around elements in the layout.
91+
92+
:::
93+
94+
## Example for Margin
95+
96+
Now, let's look at an example that demonstrates how the `margin` property can be used to create space around an element in a web page layout.
97+
98+
<Tabs>
99+
<TabItem value="HTML" label="index.html">
100+
101+
```html title="index.html"
102+
<!DOCTYPE html>
103+
<html lang="en">
104+
<head>
105+
<meta charset="UTF-8">
106+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
107+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
108+
<title>Margin Example</title>
109+
<link rel="stylesheet" href="styles.css">
110+
</head>
111+
<body>
112+
<div>
113+
<p>
114+
This is a div element with a 20px margin around it.
115+
</p>
116+
</div>
117+
</body>
118+
</html>
119+
```
120+
121+
</TabItem>
122+
123+
<TabItem value="CSS" label="styles.css">
124+
125+
```css title="styles.css"
126+
div {
127+
margin: 20px;
128+
padding: 10px;
129+
border: 1px solid black;
130+
}
131+
```
132+
133+
</TabItem>
134+
</Tabs>
135+
136+
Now, you can see the output of the above code in the Browser Window like this:
137+
138+
<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000" }}>
139+
<div style={{margin: "20px", padding: "10px", border: "1px solid black"}}>
140+
<p>
141+
This is a div element with a 20px margin around it.
142+
</p>
143+
</div>
144+
</BrowserWindow>
145+
146+
By following this example, you can use the `margin` property to create space around an element in your web page layout. Adjusting the margin values allows you to control the spacing between elements and create visually appealing designs.
147+
148+
## Conclusion
149+
150+
The `margin` property in CSS is a powerful tool for creating space around elements in your web page layout. By setting the margin values for an element, you can control the spacing between elements and create visually appealing designs. Understanding how to use the `margin` property effectively will help you create well-structured and visually appealing web pages.

0 commit comments

Comments
 (0)