What is  CSS Box Model

What is CSS Box Model

CSS stands for Cascading Style Sheets, it describes the structure and appearance of a Web page.

Box Model

The CSS box model is fundamental to laying out documents with CSS.

Every element in a browser is in a box or is a box, which means a web page is a series of boxes.

The CSS box model describes the rectangular boxes that can contain any number of other boxes. A CSS box consists of a content area that is surrounded by padding and padding surrounded by borders and finally borders are surrounded by margins.

These properties control the space around the element`s contents and other elements around it. The box model determines how elements are positioned within the browser window.

image.png

Each HTML is considered to be a box.

Margin: The outermost part is the margin between this HTML element to other HTML elements.

Border: The second part is the border. The border sits inside the margin and surrounds the padding and content of the HTML element.

Padding: The third part is the padding. The padding sits inside the border and surrounds the content of the HTML element.

Content: The fourth part is the content. The content of an HTML element is whatever is displayed inside the HTML element. This is typically a combination of text, images, and other HTML elements.