CSS Box Model

1. What is the Box Model?

The CSS box model describes the rectangular boxes generated for elements in the document tree, consisting of margins, borders, padding, and the actual content area.

2. Box Model Components

• Content: The actual content of the box, such as text or images.
• Padding: The space between the content and the border, creating breathing room inside the box.
• Border: The line surrounding the padding (if any) and content.
• Margin: The space outside the border, separating the element from other elements.

3. Padding

Padding creates space inside the element, pushing the content away from the borders. It can be set individually for each side or uniformly.

Edit Copy

selector {
    padding: 20px; /* All sides */
    padding-top: 10px; /* Top */
    padding-right: 15px; /* Right */
    padding-bottom: 10px; /* Bottom */
    padding-left: 15px; /* Left */
}

Example:

4. Borders

Borders surround the padding and content. You can customize borders using width, style, and color.

selector {
    border: 2px solid black; /* Width, style, color */
}

Example:

5. Margins

Margins create space outside the border, separating the element from others. Similar to padding, margins can be set individually or uniformly.

Edit Copy

selector {
    margin: 20px; /* All sides */
    margin-top: 10px; /* Top */
    margin-right: 15px; /* Right */
    margin-bottom: 10px; /* Bottom */
    margin-left: 15px; /* Left */
}

Example:

6. Box Model Example

Here’s a combined example illustrating the box model:

Edit Copy

<div class="box">
    <p>This is a box with padding, border, and margin.</p>
</div>

<style>
.box {
    margin: 30px; /* Space outside */
    padding: 20px; /* Space inside */
    border: 3px dashed red; /* Border around */
}
</style>

This example creates a box with a dashed red border, padding, and margin.

7. Conclusion

Understanding the CSS box model is crucial for layout design. By manipulating padding, borders, and margins, you can create visually appealing and well-structured web pages.