How to create a css box model? CSS Tutorial 06

 

1. Introduction to CSS Box Model
2. CSS Box Model Properties
3. Example of the CSS Box Model

Introduction to CSS Box Model

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

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

Therefore, as I mentioned earlier, to design better webpages, it is necessary that you understand the CSS box model. The block diagram of the CSS box model has been given below.

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

Padding comes around the content, which is defined as the space between the border and the content. The more you define the padding, the more space gets created around the content.

The border of the element comes around the padding. The border of the elements by default is hidden until you define it.

There is a margin of an element all around the border. The margin is a space from one element to the other element which helps to separate an element from another element.

Width and height of an element are defined in pixels which defines how much of the space occupies horizontally and vertically.

Once you understand the CSS box model. You can easily design the elements  depending on it. One thing you should always keep in mind is that all HTML elements follow this model.

CSS Box Model Properties 

As it is mentioned earlier, the CSS box model is composed of content, padding, border, and margin. These are called properties of the box model. All these properties are common for all HTML elements.

You can control the layout of the element by defining different values of these properties. These properties have been explained below in detail.

Content

Only the content of any HTML element is always displayed. The rest of the properties are hidden. What content will be, it can’t be controlled by CSS. Content is defined by HTML elements only. The content is an integral part of the CSS box model. You can design it with using common CSS properties such as color, background, and font etc.

Padding

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

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

• padding - This property defines the padding of all sides at once.
• padding-left - This property is used to define the property on the left side of the element.
• padding-right - This property defines the property on the right side of the element.
• padding-top - This property used to define the padding on the upper side of the element.
• padding-bottom - This property defines the padding towards the bottom of the element.

Border

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

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

margin

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

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

Example of CSS Box Model

The CSS box model is being explained by the below example.

<!DOCTYPE html>

<html>

<head>

    <title>CSS Box Model Example</title>

<style>
p {
color:red;
background:#00ff00;
padding:50px;
border:2px solid #0000ff;
margin:50px;
width: 30%;
font-size: 25px;
font-weight: bold;
text-align: justify;
}
</style>
</head>
<body>
<p>This is a paragraph which has red text, green background color, blue border and padding & margin of 50px each.</p>

</body>

</html>

In the above example, a simple paragraph is designed based on the CSS box model. This example produces the below output.

    <<-- PREVIOUS                                                                        NEXT -->>