CSS Box Model

#beginners #html #css

The CSS box model is a layout model that represents every HTML element as a rectangular box consisting of content, padding, border, and margin.
It is used to control the spacing and appearance of elements on a web page.

Components of the CSS Box Model

Content

The content area contains the text, images, or other elements displayed inside the box.
The width and height properties are applied to this area.

.box {
    width: 200px;
    height: 100px;
}

Padding

Padding is the space between the content and the border. It creates space inside the element.

.box {
    padding: 20px;
}

Border

The border surrounds the padding and content areas. You can change its width, style, and color.

.box {
    border: 2px solid black;
}

Margin

Margin is the space outside the border. It creates distance between the element and other elements on the page.

.box {
    margin: 20px;
}