CSS Box Model

A CSS Box Model is the most important concept in designing websites. It is a combination of different CSS properties, that together form a box, hence, a box model.

According to the CSS box model, a browser engine represents every element in HTML as a box. This box is a combination of the element's content, padding, margins and borders.

Let's try to understand the image below:

Css box model

In the image above, the content is wrapped with padding. This padding area is then wrapped with borders and then, outside the borders, there is margin. All these properties take space around the content, affecting the other elements outside the box.

Changes in Content, padding and borders affects the size of the container, even when its size is fixed. The margins on the other hand, clears the outside space for the container. All these properties together creates a CSS Box.


Size of a CSS Box

When you set size of any element in CSS Box Model, it is not the actual size of that element. You are just setting the height and width of the content inside the element. The actual size of the element will consist of content + padding + margins and borders.

Have a look at how the width and height of an element is determined by the browser:

Total Width: content + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Total Height: content + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Let's see a brief explanation of all these properties in the table below:

Elements of a CSS Box Model

Value Description
Content Area Any information present inside a container is content. It can be text, image, video, and so on.
Padding It is the space between the content and the borders of the container. It works inside the container. It can be set individually for all four sides.
Border A border gets placed around the padding and content. It can be adjusted for all four sides of the container. It can be styled for its width, color and corners.
Margin It manages the area outside the border. It can be set for all sides individually.

Look at the example below and observe the use of padding, borders and margins.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Box Model </title>
<meta charset="UTF-8">
<style>
div {
background-color: #e3fdcb;
width: 300px;
border: 10px solid seagreen;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element.
It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the actual content of the box. We have added a 25px padding,
25px margin and a 25px green border. </div>
</body>
</html>

Output

CSS Box Model
This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »