The css box model looks at all the Html element as boxes









Table of content

1. Setting width and height

2. Setting margins and Padding

3.  Setting border

4. Border radius

5.  Margin collapse

6.  Box sizing


1. Setting width and height

We can setbwidth and height in css as follow #box{

Height:70px;
width:60px;

}

Note that the total width And height is calcupated as follows

Total height = 
height + Top/bottom Padding+ Top /bottom border + Top bottom margin

2. Setting margin and Padding

We can set margin and Padding as follows
. Box {
                margin:3px;
                                         
                 Padding:6px;
}


You can set top, bottom, left and right values

Let see



Box main{

Margin: 7px 0px 2px 4px;

}               ⬆        ⬆      ⬆      ⬆

           Top   right  bottom left 



Box last{

           margin :  7px 7px;

}                             ⬆         ⬆

                Top&bottom  right&left



We can set individual margin and Padding like this 



Margin-top: 40px;

Margin-bottom: 2px;

Margin-left:38px;

Margin-right:28px;


Also same with Padding



3. Setting Border

We can set the border as follows 
. Bx{
Border-width: 30px ;
Border-style:solid;
Border-color:red;
}


4. Border radius

We can set border radius to create rounder the border 
. Border{
Border-radius :7px
}


5. Margin collapse

When two margin from different elements verlap to each other, the equivalent margin is the greater of the two. This is called margin collapse




6. Box sizing

Determiner what out of Padding and border is included in element width and height
Can be content bix or border 
Box 
Div1{
Box-sizing: border-box;
}
                        ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆
                           The content width and heigt including content + Padding +border





Thanks for visiting this site
Have a good day

Chapter 4  Fonts and Display Click me


Html Full course Link  ➡️Click here
Html से List, Table and form  कैसे बनाए |click here

Chapter 1 Creating our first website by css