CSS 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.

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 SizeCSS Properties
Total Widthwidth + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Total Heightheight + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Categories: CSS