A White Blank Page is New CSS Box Model

Pruthviraj-MV — Sat, 05 Dec 2020 17:47:04 +0000

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

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?

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

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?

To achieve these styles on a webpage we have different properties

To learn more on using border properties refer here

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.

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.

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

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

DEV Community: Pruthviraj-MV