CSS Box Model

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

The following diagram illustrates how the CSS properties of width, height, padding, border, and margin specify how much space an element will occupy on a web page. This diagram can be found by right-clicking and selecting "Inspect Element" on any web page, and then scrolling to the end of the CSS. In the diagram, the orange section illustrates the margin section, the light orange section illustrates the border section, the green section illustrates the padding section and the blue section illustrates the remaining width and height of the box.

Also, if an element has the background color it will be visible through its padding area. The margin area always remains transparent, it is not affected by the element's background color, however, it causes the background color of the parent element to be seen through it.

Width and Height of the Elements

Usually, when we set the width and height of an element using the CSS width and height properties, we are only setting the width and height of the content area of that 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 on a web page is calculated like this:

Note: In the CSS box model, the content area of an element's box is the area where its content, such as text, images, videos, etc., appears. It may also contain descendant element boxes.

Input:-

Output:-