The first question in your mind after reading the title might be "Why should I know about the box model?" and also "What does it mean ?" (which we shall cover in this blog later on). But coming to the first question that why should you know about the box model and what is its importance?

We all use websites using the internet daily. The websites are full of images, paragraphs, videos, gifs, and other media elements. But have you ever wondered how are they arranged and with what logic these elements exist? There is various set of rules in coding websites that help to create and arrange multiple elements orderly. Of course, we can't cover all of the coding involved in making web pages but surely we can try to understand the way these elements are ordered and the related components.

Introduction :

This blog post will definitely make you think about the contents of a web page whenever you visit a website and it will further give you a new perspective on visiting the websites which are available on the web. This blog will speak about some terms mentioned in computer understandable languages such as HTML and CSS where HTML(Hypertext markup language) is a standard markup language used to structure web pages and CSS(Cascading Style Sheets) is used to style and layout web pages. The goal of writing on this specific topic of the CSS basic box model is to make tech and non-tech people educated about the structures of small-small elements of websites and the difficulties faced while combining all of the elements to create single or multiple web pages. The other goal of writing this blog is also for my own reference regarding this topic.

What is the CSS box model?

According to the CSS box model, an element on a web page present on the web is considered a box by the browser. This box consists of basically four parts as shown in the above image. These four parts are :

Content Section
Padding Section
Border Section
Margin Section

1. Content Section :

The content area contains the actual content of the web page which can be a video, image, gif, text, etc. It is surrounded by padding, border, and margin. Its properties are content-height(which defines the height of the content) and content-width (which defines the width of the content). The content area usually consists of a background image or background colors.

<html>
  <head> 
    <title> This is a simple html document </title>
  </head>
  <body>
<h1 style = "background-color : yellow"> Hello World </h2>
  </body>
</html>

The output of the above code: Screenshot (396).png

Here, the text "Hello World " is the content with the background color : "yellow".

2. Padding Section :

The padding area extends the content element on a web page from one or more sides to include the padding of the element. It has four padding properties which are :

padding-top: It specifies the padding value from the top.
padding-bottom: It specifies the padding value from the bottom.
padding-right: It specifies the padding value from the right.
padding-left: It specifies the padding value from the left.

<html>
  <head> 
    <title> This is a simple html document </title>
  </head>
  <body>
<h1 style = "padding-top : 100px; padding-bottom : 40px; padding-right : 100px; padding-left : 200px"> Hello World </h2>
  </body>
</html>

Screenshot (398).png

3. Border Section :

Border Area extends the padding area to include the border of the elements. It includes the properties such as border-height and border-width. These two properties defines the height and width of the border which surrounds the element. The border also contains a border-style property which defines the style of the border. Some of the most-used properties to style a border are solid, dotted, and dashed.

<html>
  <head> 
    <title> This is a simple html document </title>
  </head>
  <body>
<h1 style ="border : 3px black; border-style : solid"> Hello World </h1>
  </body>
</html>

Output :

Screenshot (400).png

4. Margin Section :

The margin Area is the section that extends the border area to include an empty area. It is the area that divides one element from the other neighboring elements. The margin properties to separate one element from the other are

margin-top
margin-bottom
margin-right
margin-left

<html>
  <head> 
    <title> This is a simple html document </title>
  </head>
  <body>
<h1 style ="margin-top : 50px; margin-bottom : 40px; margin-right : 600px ; margin-left : 300px;
 background-color : yellow"> Hello World </h1>
  </body>
</html>

Output : Screenshot (403).png

These properties are also applied to various other web page elements such as images, videos, and gifs, and thus a complete web page is formed.

I hope you must have learned something from this blog, do share if there are any corrections, and also try to give feedback regarding this blog for me to improve my writing and expand my knowledge.

References :

W3schools : w3schools.com/css/css_boxmodel.asp
mdn web docs : developer.mozilla.org/en-US/docs/Web/CSS/CS..

Understanding HTML-CSS box model

Table of contents