CSS Box Model

Every HTML element has a box around it and when talked in terms of layout and design this is referred as CSS box Model. It is mainly made up of 4 fundamental parts namely margin,padding,borders and the actual content.

In the above diagram you can see that how a element is placed on a html page. Content can be anything ranging from H1’s to image or a hyperlink. Around it there are other parts depending on which it is decided that how a element will be place.

Different parts of CSS box model

1. Content : Anything that we want to display on the html page is a content. Different tags like h1,p,a etc. are used to specify that this is a particular type of content.
2. Padding: This is a white area around the content that clears the area around the content. Its value is controlled using padding property in CSS
3. Border Box: This wraps up the content and any padding around it. It can be of different type from solid to dashed.
4. Margin: This is the transparent space around the content and other contents on the html page. Its value can be controlled using margin in css

Code snippet to demonstrate box model:

div {
width: 300px;
border: 30px solid green;
padding: 50px;
margin: 30px;
}

The width defines the width of the content,Border property conveys that border around the content has to be 30px thick solid and its colour should be green, padding property gives padding value of the content and margin specifies the space around the content from other contents on the HTML page here it is 30px.

Conclusion

So everything in css has a box around it and understanding of this box is very crucial for designing and layout purposes or to align items with other items. These four properties namely border, margin, padding and content are fundamentals of box model and on controlling these values one can fix the items in a html page.