What is CSS Box Model?

The CSS box model is a concept that describes the design and layout of HTML elements on a web page. It defines how the width, height, padding, border, and margin of an element are calculated and rendered on a page.

Each HTML element is treated as a rectangular box, with content in the center, surrounded by padding, a border, and a margin. The dimensions of the box are determined by the following components:

1. Content: This is the actual content of the element, such as text or an image.

2. Padding: This is the area between the content and the border, used to create space between the content and the border. The padding is transparent and does not have a background color.

3. Border: This is the line that surrounds the padding and content, and can have various styles such as width, color, and style (solid, dotted, etc.).

4. Margin: This is the area outside the border, and is used to create space between elements. The margin is transparent and does not have a background color.

   

    

The width and height of an element are calculated as the sum of the content, padding, and border, plus the margin. By setting various CSS properties for the padding, border, and margin, you can control the size and appearance of elements on a web page.

It's important to understand the CSS box model, as it affects the layout and appearance of elements on a web page, and is a fundamental concept for web design and development.

Margin

Set the margin between two elements. This is create space outside of border of that element.

p{
    margin: 10px;
}

Padding

Set the padding between two elements. This is create space inside of border of that element.

p{
    padding: 10px;
}

Border

Set the border of html element. In css box model 'border' comes between 'margin' and 'padding' of element.

p{
    border: 1px solid blue;
}

---