A brief Introduction of CSS Box Model

In this blog I will explain you basic introduction of CSS Box Model...!!

First we will discuss what is CSS?

CSS stands for Cascading Style Sheets which acts as a presentation layer in any webApplication.

CSS is used to add styles, design and how our elements will display on Screen or Broser Window.

CSS Box Model?

All HTML elements are rectangular in nature when it renders on webpage,so it has box like architechture which consists of padding, border and margin and visible content.

"The content part of any HTML element is wraps around a box which is called as CSS Box Model."

Here we will explain you different component of Box Model by example-

We will use design of our previous blog i.e. How to make website in 10 easy steps?

Please read the above blog to know the structure of a basic webpage which we will modify to demonstrate examples below:

Now we will modify the HTML page which we have used in the above blog by inserting a <div> container in the <p> element.

Or you just copy paste the HTML Page from below image-

1. Padding- It is the area between content and border and it is transparent in nature.

Example- To apply padding to the <div> element just put the below CSS style in the <style> tag of head section.

div
{
padding: 10px;
}

Let's see what we get in output so just refresh the webpage and press F12 on keyboard.

2. Border- It is used to provide border to an HTML element.

Example- To add border just add the below highlighted line of code in the same div section of <style> tag of head section.

div
{
border: 25px solid black;
}

Here we have used "solid" in border property value otherwise it will not be visible to the Webpage.

Now just refresh the webpage and open developer toll(Press F12) to get the output.

3. Margin- It is used to separate HTML elements from each other and it is also transparent in nature.

Example-

div
{
margin: 10px;
}

To add Margin to our <div> element just paste the highlighted code in the div section of <style> tag.

To get the output just reload again in developer tool(F12).

Now in this image you can see the whole Box Model i.e. Padding, Border, Margin to <div> element.

In this example we have used div element to demonstrate Box Model so we have applied CSS for <div> element with the help of <style> tag of head section.

If you have any queries then please  make a post in the comment section..!!

Please share and subscribe my blog to get more updates..!!

#KeepLearning.