Scribd
Upload
2 views2 pages

Box Model

The CSS box model describes the structure of an element, consisting of content, padding, border, and margin. Each component can be individually styled with properties like width, height, and various spacing options. The box-sizing property determines how the total dimensions of an element are calculated, either including or excluding padding and border.

Uploaded by

logeshece
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views2 pages

Box Model

The CSS box model describes the structure of an element, consisting of content, padding, border, and margin. Each component can be individually styled with properties like width, height, and various spacing options. The box-sizing property determines how the total dimensions of an element are calculated, either including or excluding padding and border.

Uploaded by

logeshece
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!-- !

Box Model -->

#### Definition:

- The CSS box model represents the structure of an element in terms of its
content, padding, border, and margin.

#### Components of the Box Model:

1. **Content**:

- The actual content of the element, such as text, images, or other media.
- Example: `width` and `height` properties define the size of the
content area.

2. **Padding**:

- The space between the content and the border.


- Example: `padding: 20px;` (applies padding equally to all sides).

3. **Border**:

- A line surrounding the padding (if any) and the content.


- Can be styled with different widths, colors, and styles.
- Example: `border: 1px solid black;` (sets a 1px solid black border).

4. **Margin**:

- The space outside the border, separating the element from adjacent
elements.
- Example: `margin: 10px;` (applies margin equally to all sides).

#### Box Model Properties:

1. **Width and Height**:


- Define the size of the content area.
- Example: `width: 100px; height: 50px;`.

2. **Padding**:
- Can be set individually for each side: `padding-top`, `padding-right`,
`padding-bottom`, `padding-left`.
- Example: `padding: 10px 20px 30px 40px;` (top, right, bottom, left).
3. **Border**:
- Can be set individually for each side: `border-top`, `border-right`,
`border-bottom`, `border-left`.
- Example: `border: 2px dashed red;` (applies to all sides).
- Detailed properties: `border-width`, `border-style`, `border-color`.

4. **Margin**:
- Can be set individually for each side: `margin-top`, `margin-right`,
`margin-bottom`, `margin-left`.
- Example: `margin: 5px 10px;` (top/bottom, right/left).

#### Box-Sizing Property:

- **`box-sizing`**:

- Defines how the total width and height of an element are calculated.
- `content-box` (default): width and height include only the content.
- `border-box`: width and height include content, padding, and border.
- Example: `box-sizing: border-box;`.

You might also like