Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added box modules #4623

Merged
merged 1 commit into from
Feb 1, 2025
Merged

added box modules #4623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 160 additions & 0 deletions docs/css/box-model/box-sizing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
---
id: box-sizing
title: CSS Box Sizing
sidebar_label: Box Sizing
sidebar_position: 2
keywords: [css box sizing, box sizing, css box model, css box model box sizing]
description: Learn how the CSS `box-sizing` property can be used to control the sizing behavior of elements in the CSS box model.
tags: [css, box sizing, css box model, css box model box sizing]
---

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.

<AdsComponent />

## Syntax

The syntax for the `box-sizing` property is as follows:

```css title="index.css"
selector {
box-sizing: value;
}
```

- `selector`: The element to which the box sizing is applied.
- `box-sizing`: The CSS property used to control the sizing behavior of the element.
- `value`: Specifies the sizing behavior of the element. It can take one of the following values:
- `content-box`: The default value. The width and height of the element are calculated based on the content area only.
- `border-box`: The width and height of the element include the padding and border, but not the margin.

The default value of the `box-sizing` property is `content-box`.

## Example

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:

```css title="index.css"
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid black;
}
```

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:

```html title="index.html"
<div></div>
```

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.

<AdsComponent />

:::note Try it yourself
Experiment with different values of the `box-sizing` property to see how the sizing behavior of elements changes based on the box model.

:::

## Example for Box Sizing

### Example 1: Using `content-box`

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:

<Tabs>
<TabItem value="HTML" label="index.html">

```html title="index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<title>Box Sizing Example</title>
</head>
<body>
<div></div>
</body>
</html>
```

</TabItem>
<TabItem value="CSS" label="index.css">

```css title="index.css"
div {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 1px solid black;
}
```

</TabItem>
</Tabs>

Now, you can see the output of the above code in the Browser Window like this:

<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000" }}>
<div style={{boxSizing: "content-box", width: "200px", padding: "20px", border: "1px solid black"}}></div>
</BrowserWindow>

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.

<AdsComponent />

### Example 2: Using `border-box`

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:

<Tabs>
<TabItem value="HTML" label="index.html">

```html title="index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<title>Box Sizing Example</title>
</head>
<body>
<div></div>
</body>
</html>
```

</TabItem>

<TabItem value="CSS" label="index.css">

```css title="index.css"
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid black;
}
```

</TabItem>
</Tabs>

Now, you can see the output of the above code in the Browser Window like this:

<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000" }}>
<div style={{boxSizing: "border-box", width: "200px", padding: "20px", border: "1px solid black"}}></div>
</BrowserWindow>

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.

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.

:::tip
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.
:::

## Conclusion

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.
150 changes: 150 additions & 0 deletions docs/css/box-model/margin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
---
id: margin
title: CSS Margin
sidebar_label: Margin
sidebar_position: 3
keywords:
[
css margin,
margin property,
css margin property,
css spacing,
margin shorthand,
margin values,
]
description: Learn how to use the CSS margin property to create space around elements in your web page layout.
tags: [css, margin, css margin, margin property, css margin property]
---

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.

<AdsComponent />

## Syntax

The syntax for the `margin` property is as follows:

```css title="index.css"
selector {
margin: value;
}
```

- `selector`: The element to which the margin is applied.
- `margin`: The CSS property used to set the margin around an element.
- `value`: Specifies the margin values for the top, right, bottom, and left sides of the element. It can take one of the following forms:
- `<length>`: Specifies a fixed margin value in pixels (e.g., `10px`).
- `<percentage>`: Specifies a margin value as a percentage of the width of the containing element.
- `auto`: Adjusts the margin to automatically distribute the space between elements.
- `initial`: Sets the margin to its default value.
- `inherit`: Inherits the margin value from the parent element.
- `unset`: Resets the margin to its inherited value if it inherits from its parent, or to its initial value if not.

The `margin` property can be set using one of the following shorthand values:

- `margin: value;`: Sets the same margin value for all four sides.
- `margin: vertical horizontal;`: Sets the vertical margin (top and bottom) and horizontal margin (left and right) to different values.
- `margin: top right bottom left;`: Sets individual margin values for the top, right, bottom, and left sides.
- `margin: initial;`: Sets the margin to its default value.
- `margin: inherit;`: Inherits the margin value from the parent element.
- `margin: unset;`: Resets the margin to its inherited value if it inherits from its parent, or to its initial value if not.
- `margin-top: value;`: Sets the margin value for the top side.
- `margin-right: value;`: Sets the margin value for the right side.
- `margin-bottom: value;`: Sets the margin value for the bottom side.
- `margin-left: value;`: Sets the margin value for the left side.
- `margin-block-start: value;`: Sets the margin value for the block-start side (top margin in horizontal writing mode).
- `margin-block-end: value;`: Sets the margin value for the block-end side (bottom margin in horizontal writing mode).

The default value of the `margin` property is `0`, which means no margin is applied to the element.

## Example

In the following example, the `margin` property is used to set the margin around a `<div>` element to `20px` on all sides:

```css title="index.css"
div {
margin: 20px;
}
```

In the HTML code below, the CSS rule will apply the `20px` margin to the `<div>` element:

```html title="index.html"
<div>This is a div element with a 20px margin around it.</div>
```

By adjusting the margin values, you can control the spacing between elements and create visually appealing layouts in your web page design.

<AdsComponent />

:::info Additional Information

**Margin Values:**

- Margins are the transparent spaces around elements that separate them from other elements on the page.
- The `margin` property is used to set the margin around an element.
- Margin values can be specified in pixels, percentages, or using the `auto`, `initial`, `inherit`, or `unset` keywords.
- The default value of the `margin` property is `0`, which means no margin is applied to the element.
- The `margin` property can be set using shorthand values or individual properties for each side.
- By adjusting the margin values, you can control the spacing between elements and create visually appealing layouts in your web page design.
- Margins are part of the CSS box model and are used to create space around elements in the layout.

:::

## Example for Margin

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.

<Tabs>
<TabItem value="HTML" label="index.html">

```html title="index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>
This is a div element with a 20px margin around it.
</p>
</div>
</body>
</html>
```

</TabItem>

<TabItem value="CSS" label="styles.css">

```css title="styles.css"
div {
margin: 20px;
padding: 10px;
border: 1px solid black;
}
```

</TabItem>
</Tabs>

Now, you can see the output of the above code in the Browser Window like this:

<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000" }}>
<div style={{margin: "20px", padding: "10px", border: "1px solid black"}}>
<p>
This is a div element with a 20px margin around it.
</p>
</div>
</BrowserWindow>

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.

## Conclusion

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.
Loading
Loading