CSS Box Model

If you want to design better web pages through CSS, then it is important for you to understand the CSS box model. According to the CSS box model, every HTML element is a rectangular box. This rectangular box is made of the content of that element, padding, border and margin. It is known in the name of the box model in CSS.

CSS box model is the common model of the layout of elements in webpages. Whatever elements you add to the webpage such as links, images, paragraphs, buttons, text, etc. are all in accordance with this model.

The block diagram of the lowercase CSS box model is being given.

As you can see in the block diagram above, according to the CSS box model most of the content is in the center. In the case of a paragraph, there is a content text and in the case of an image, content can be the main image.

Example

div {
  width: 300px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}

Properties of CSS Box Model

The CSS box is made up of content content, padding, border and margin. All these are called properties of the box model. All these properties are common to all HTML elements.

By defining different values ​​of these properties, you can control the layout of the element. These properties are being explained in detail below.

  • Content
  • Padding
  • Border
  • Margin

Content

The content of any HTML element is always show. The rest of the properties are hidden. What content is it can not be controlled by CSS. Content is defined by HTML elements only.

Content is an integral part of the CSS box model. You can design it from common CSS properties such as color, background and font etc.

Padding

It is defined by padding how much space will remain around the content. Padding properties are available in CSS to define padding. You can define padding for all sides simultaneously or you can also define different paddings for different sides.

Padding does not have any color. It is transparent. Padding is show in the same color as the background color of the element. The following properties of CSS are used to define the padding.

  • padding – This property defines the padding of all sides at once.
  • padding-left – This property defines the property on the left side of the element.
  • padding-right – This property is defined by the property on the right side of the element.
  • padding-top – This property defines the padding on the upper side of the element.
  • padding-bottom – This property is defined by padding to the bottom of the element.

Border

Content and padding have border around the element around. As long as you do not define the border, the border remains hidden. Border Define is available in border properties in CSS. These are being described below.

  • border – This property defines the boundaries of all sides at once.
  • border-left – This property defines the border of the left side.
  • border-right – This property defines the border of the right side.
  • border-top – This property defines the border on the upper side of the element.
  • border-bottom – This property is define the border towards the bottom of the element.

Margin

An element is defined as space around the margin boundary. Just like the padding, margin does not even have any color, it is transparent. Margin properties are available in CSS to define margin. These properties are being described below.

  • margin – This property is define all sides margin at once.
  • margin-left – This property is define the margin of the left side.
  • margin-right – This property is define the right side margin.
  • margin-top – This property is define the top side margin.
  • margin-bottom – This property is defined by the margin of the bottom side.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 400px;
  padding: 15px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>
<div>The picture above is 400px wide. The total width of this element is also 400px.</div>

</body>
</html>