CSS Box Model

The CSS box model looks at all the HTML elements s Boxes.

The CSS box model is a fundamental concept that defines the structure of every element on a webpage. It consists of:

1. Content: The actual content of the box, such as text or images.

2. Padding: The space between the content and the border. It can be adjusted to add space inside the element.                                

   
   
   

3. Border: The border that surrounds the padding and content. You can customize its width, style, and color.

4. Margin: The space outside the border. It creates distance between the element and other elements on the page.

Here's a visual representation to make it clearer:

 

 

Setting Height  and width

We can set width and height in CSS as follows.

#box {

Height :70px;

Width: 70 px;

}

Note that the total width/height is calculated s follows:

Total Height = Height + Top/ bottom Padding + Top and bottom border + Top and bottom margin.

 Setting Margin and Padding

We can set margin and padding s follows:

.box {

Margin : 3px ;

Padding : 4px ;

}

Sets top, bottom, left  and right values.

.boxmain {

Margin : 7px 0px 2px 11px;

}

Sets top, bottom, left  and right values.

.boxlast {

Margin : 7px 3px;

}

Sets top and bottom, left  and right values.

We can also set individual margins/padding like this:

Margin-top :  70px;

Margin-bottom : 3px;

Margin-left : 8px;

Margin-right : 9px;

Same goes for padding.

Setting Borders

We can set the borders as follows

.bx {

Border-width: 2px ;

Border-style: Solid ;

Border-color: red ;

 }

Or just set/ Shorthand:-

 .bx {

 border: 2px Solid red;

}

Border radius

We can set border to create rounded borders

.div2 {

Border-radius : 7px ;

}

We use border radius set to 50% to get circular shape on webpage.

Margin collapse

When two margins from different elements overlap, the equivalent margin is the greater of the two. This is called margin collapse.

 

Box sizing

Determines what out of padding and border is included in elements width and height.

Can be content box ( Include only content in width and height) or border-box(The content width and height includes content + padding + border) . We generally prefer border box in box sizing.