A White Blank Page is New CSS Box Model 
Tags: beginners, css
Published: 2020-12-05 17:47:04

##### Yes, you heard it right. Designing a webpage using CSS properties to place your html element at right place on the page is nothing but how we have been writing on white blank page

# Are you a beginner? Trying to understand the CSS Box model?  
# Then this blog is for you...

##### Disclaimer: I am also a beginner here and putting up the things how I learnt CSS Box model

I will try to help you to understand the properties of the box model, with which you will be in better place to design the basic page layout. 

## A White Blank Page is our New Box Model  
Do you have count of pages have you written till today? 
I guess no... And not needed. At least we can remember the layout of a page.

One of the effective way of understanding a topic is to relate it with a familiar topic/thing.
So every time I start styling my webpage, I imagine writing on a white blank page.

## Basically we have four properties inside a CSS Box Model
* margin
* border
* padding
* content 

![](https://www.csssolid.com/images/box-model/css-box-model.png)

Wondering? how a page is relatable to box model properties.
Let's see one by one

###**margin**
Whenever we have an unruled page, to make it look in a good format first thing we do is to draw outer lines. The space we leave here is called **margin**. So based on our requirement we place the line near to end pages, if we want to use the page to the fullest or else if it is an assignment then those lines would move far from the page ends, smart right?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t023m0ou608omv99sg5g.png)

In CSS, to achieve this spacing we use property *margin*.  Below is a basic usage of margin.

```
margin: topspacing rightspacing bottomspacing leftspacing; 
Example:- margin: 2rem 2rem 1rem 1rem;
```

The spacing at top, right, bottom and left can be controlled individually using below properties:
> * margin-top
> * margin-right
> * margin-bottom
> * margin-left

To learn more on using margin refer [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)

###**border**
Now the drawn line is nothing but the **border**. To make our blank page bit attractive or beautiful, one will think of having double line border, thick border, color border etc... Also, we draw lines for writing the text lines in formatted way and this also will come under border property in css. Without these borders, our text-lines on a blank page will create runways for airplane or a hill down steep or a humpy road. What's your text-lines would create without border?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/91i190dqa2hi4wh815pp.png)

To achieve these styles on a webpage we have different properties

To learn more on using border properties refer [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)

###**content**
Now the page format is ready and next is to start writing the text in  lines and this is nothing but the **content**. According to the line we make the text look like heading, sub-headings, bold texts, italics text, size, font style etc. To achieve all these stylings we have many css properties.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qyranewvx7bsbiva878h.png)

###**padding**
Consider a text line, normally we write on the texts laying above the line and also have seen one my friend writing at middle between lines.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4w4nzpgs6m7h7qfuvq11.png)

And this texts placing between the lines is **padding** in css. It's usage is similar to the margin as shown below 

```
padding: topspacing rightspacing bottomspacing leftspacing; 
Example:- padding: 1rem 0.5em 1rem 0.5rem;
```
The spacing at top, right, bottom and left can be controlled individually using below properties:
> * padding-top
> * padding-right
> * padding-bottom
> * padding-left

To learn more on using margin refer [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)

**Remember** Each html element will have its own box model.

To see how an html element styled, use console of the webpage

Make sense? " A White Blank Page is New CSS Box Model "

Thanks for the read! 

Please feel free write feedback.
Do correct me, if I stated something wrong here..

**Blog content source:**

https://www.youtube.com/watch?v=u6_a0d94A1Q&t=1080s

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model