CSS Box Model

The CSS box model describes how elements are visually laid out on the web pages.

What is Box Model

Every element that can be displayed is comprised of one or more rectangular boxes. CSS box model typically describes how these rectangular boxes are laid out on a web page. These boxes can have different properties and can interact with each other in different ways, but every box has a content area and optional surrounding margin, padding, and border.

The following diagram demonstrates how the margin, padding, and border CSS properties determines how much space an element can take on a web page.

css-box-model
css-box-model

Width and Height of Elements

Usually when you set the width and height of an element using the CSS width and height properties, in reality you are only setting the width and height of the content area of an element. The actual width and height of the element’s box depend on several factors.

The actual space that an element’s box might take is calculated like this:

Box Size CSS Properties
Total Width width + padding-left + padding-right + border-left + border-right +margin-left + margin-right
Total Height height + padding-top + padding-bottom + border-top + border-bottom+ margin-top + margin-bottom

Explanation of the different properties given in the upcoming chapters.

Note:In CSS box model; content area of the element’s box is the area, where text, images, lists, tables, forms, videos, etc. appears.

Loading