CSS Box (Box Model)

The CSS box model describes how elements are visually laid out on a webpage.

What is the Box Model

Each element that can be displayed contains one or more rectangular boxes. The CSS box model typically describes how these rectangular boxes are arranged on a webpage. These boxes can have different properties and can interact with each other in different ways, but each box has a content area and optional surrounding margins, borders, and padding.

The following figure demonstrates how the margin, padding, and border CSS properties determine the space that an element can occupy on a webpage.

Element Width and Height

Generally, when you use CSS widthandheightWhen setting the width and height of an element, in fact, you are only setting the width and height of the element's content area. The actual width and height of the element box depend on several factors.

The actual space that the element box may occupy is calculated as follows:

The usage of different properties given in the following chapters.