From d8826b66c3822b4c7041d109aa39cf2879b82f5e Mon Sep 17 00:00:00 2001 From: Ajay-Dhangar Date: Fri, 31 Jan 2025 22:00:23 +0530 Subject: [PATCH] added box modules --- docs/css/box-model/box-sizing.md | 160 +++++++++++++++++++++++++++++++ docs/css/box-model/margin.md | 150 +++++++++++++++++++++++++++++ docs/css/box-model/padding.md | 156 ++++++++++++++++++++++++++++++ 3 files changed, 466 insertions(+) diff --git a/docs/css/box-model/box-sizing.md b/docs/css/box-model/box-sizing.md index e69de29bb..223e0bb6c 100644 --- a/docs/css/box-model/box-sizing.md +++ b/docs/css/box-model/box-sizing.md @@ -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. + + + +## 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 `
` 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 `
` element, resulting in a total width of `200px` including the padding and border: + +```html title="index.html" +
+``` + +In this example, the total width of the `
` element will be `200px`, including the padding and border, due to the `border-box` value of the `box-sizing` property. + + + +:::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: + + + + +```html title="index.html" + + + + + Box Sizing Example + + +
+ + +``` + + + + +```css title="index.css" +div { + box-sizing: content-box; + width: 200px; + padding: 20px; + border: 1px solid black; +} +``` + + + + +Now, you can see the output of the above code in the Browser Window like this: + + +
+ + +In this example, the total width of the `
` 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. + + + +### 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: + + + + +```html title="index.html" + + + + + Box Sizing Example + + +
+ + +``` + + + + + +```css title="index.css" +div { + box-sizing: border-box; + width: 200px; + padding: 20px; + border: 1px solid black; +} +``` + + + + +Now, you can see the output of the above code in the Browser Window like this: + + +
+ + +In this example, the total width of the `
` 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. \ No newline at end of file diff --git a/docs/css/box-model/margin.md b/docs/css/box-model/margin.md index e69de29bb..d98965aa7 100644 --- a/docs/css/box-model/margin.md +++ b/docs/css/box-model/margin.md @@ -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. + + + +## 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: + - ``: Specifies a fixed margin value in pixels (e.g., `10px`). + - ``: 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 `
` 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 `
` element: + +```html title="index.html" +
This is a div element with a 20px margin around it.
+``` + +By adjusting the margin values, you can control the spacing between elements and create visually appealing layouts in your web page design. + + + +:::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. + + + + +```html title="index.html" + + + + + + + Margin Example + + + +
+

+ This is a div element with a 20px margin around it. +

+
+ + +``` + + + + + +```css title="styles.css" +div { + margin: 20px; + padding: 10px; + border: 1px solid black; +} +``` + + + + +Now, you can see the output of the above code in the Browser Window like this: + + +
+

+ This is a div element with a 20px margin around it. +

+
+ + +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. \ No newline at end of file diff --git a/docs/css/box-model/padding.md b/docs/css/box-model/padding.md index e69de29bb..861090979 100644 --- a/docs/css/box-model/padding.md +++ b/docs/css/box-model/padding.md @@ -0,0 +1,156 @@ +--- +id: padding +title: CSS Padding +sidebar_label: Padding +sidebar_position: 3 +keywords: + [ + css padding, + padding property, + css padding property, + css spacing, + padding shorthand, + padding values, + ] +description: Learn how to use the CSS padding property to create space inside elements in your web page layout. +tags: [css, padding, css padding, padding property, css padding property] +--- + +In CSS, the `padding` property is used to create space inside elements in your web page layout. Padding is the transparent space inside the border of an element that separates the content from the border. By adjusting the padding values, you can control the spacing between the content and the border of an element to create visually appealing layouts. + + + +## Syntax + +The syntax for the `padding` property is as follows: + +```css title="index.css" +selector { + padding: value; +} +``` + +- `selector`: The element to which the padding is applied. +- `padding`: The CSS property used to set the padding inside an element. +- `value`: Specifies the padding values for the top, right, bottom, and left sides of the element. It can take one of the following forms: + - ``: Specifies a fixed padding value in pixels (e.g., `10px`). + - ``: Specifies a padding value as a percentage of the width of the containing element. + - `initial`: Sets the padding to its default value. + - `inherit`: Inherits the padding value from the parent element. + - `unset`: Resets the padding to its inherited value if it inherits from its parent, or to its initial value if not. + +The `padding` property can be set using one of the following shorthand values: + +- `padding: value;`: Sets the same padding value for all four sides. +- `padding: vertical horizontal;`: Sets the vertical padding (top and bottom) and horizontal padding (left and right) to different values. +- `padding: top right bottom left;`: Sets individual padding values for the top, right, bottom, and left sides. +- `padding: initial;`: Sets the padding to its default value. +- `padding: inherit;`: Inherits the padding value from the parent element. +- `padding: unset;`: Resets the padding to its inherited value if it inherits from its parent, or to its initial value if not. +- `padding-top: value;`: Sets the padding value for the top side. +- `padding-right: value;`: Sets the padding value for the right side. +- `padding-bottom: value;`: Sets the padding value for the bottom side. +- `padding-left: value;`: Sets the padding value for the left side. + +The default value of the `padding` property is `0`, which means no padding is applied to the element. + +## Example + +In the following example, the `padding` property is used to set the padding inside a `
` element to `20px` on all sides: + +```css title="index.css" +div { + padding: 20px; +} +``` + +In the HTML code below, the CSS rule will apply the `20px` padding to the `
` element: + +```html title="index.html" +
+

+ This is a div with 20px padding inside. +

+
+``` + +By adjusting the padding values, you can create space inside elements and control the spacing between the content and the border of an element in your web page layout. + + + +## Example for Padding + +In this example, we'll explore different ways to set padding values using the `padding` property. + +### Example 1: Using Fixed Padding Values + +In this example, the `padding` property is used to set fixed padding values for all four sides of a `
` element: + +```css title="index.css" +div { + padding: 10px; +} +``` + +In the HTML code below, the CSS rule will apply the `10px` padding to the `
` element: + +```html title="index.html" +
+

+ This is a div with 10px padding on all sides. +

+
+``` + +### Example 2: Using Different Padding Values + +In this example, the `padding` property is used to set different padding values for the top, right, bottom, and left sides of a `
` element: + +```css title="index.css" +div { + padding: 10px 20px 15px 25px; +} +``` + +In the HTML code below, the CSS rule will apply the different padding values to the `
` element: + +```html title="index.html" +
+

+ This is a div with different padding values on each side. +

+
+``` + +### Example 3: Using Percentage Padding Values + +In this example, the `padding` property is used to set percentage-based padding values for all four sides of a `
` element: + +```css title="index.css" +div { + padding: 5% 10% 7% 15%; +} +``` + +In the HTML code below, the CSS rule will apply the percentage-based padding values to the `
` element: + +```html title="index.html" +
+

+ This is a div with percentage-based padding values on all sides. +

+
+``` + +By using different padding values, you can create visually appealing layouts with varying amounts of space inside elements in your web page design. + + + +:::note Try it yourself +Experiment with different padding values and combinations to see how the spacing inside elements changes based on the padding values applied. + +::: + +## Conclusion + +The `padding` property in CSS allows you to create space inside elements by specifying padding values for the top, right, bottom, and left sides of an element. By adjusting the padding values, you can control the spacing between the content and the border of an element, creating visually appealing layouts in your web page design. Experiment with different padding values to achieve the desired spacing and layout for your web page elements. \ No newline at end of file