CSS Box Model - Understanding the Box Model Properties

The CSS box model is a fundamental concept that describes how an element is rendered and how its dimensions (size and spacing) are calculated. The box model consists of four main components that surround the content of every HTML element: content, padding, border, and margin. Understanding the box model helps in controlling the size of elements, spacing, and layout behavior on a webpage.

Content: The actual content inside the element (e.g., text, images).

Padding: Space between the content and the border. It is transparent and adds to the size of the element.

Border: A visible line around the padding and content.

Margin: Space outside the border between this element and neighboring elements. Like padding, it is also transparent and does not have a background color.

Example

div {

background-color: lightgrey;

width: 300px; /* Content width */

height: 150px; /* Content height */

padding: 20px; /* Adds space inside the element */

border: 10px solid green; /* Adds a border around the padding */

margin: 30px; /* Adds space outside the element */

}

Try it yourself

In this example, the total width and total height of the element become:

Total Width = width + padding-left + padding-right + border-left + border-right = 300px + 20px + 20px + 5px + 5px = 350px
Total Height = height + padding-top + padding-bottom + border-top + border-bottom = 150px + 20px + 20px + 5px + 5px = 200px

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.