CSS Intro

CSS Intro Quiz

CSS Intro Exercise

CSS Basic

CSS Basic Quiz

CSS Basic Exercise

CSS Advance

CSS Advance Quiz

CSS Advance Exercise


CSS3 Quiz

CSS3 Exercise

CSS Properties

CSS Functions

CSS Selectors


The CSS Box Model



All HTML elements can be considered boxes. The CSS box model represents the design and layout of the site.


Box Model Contains:-


  • content
  • padding
  • border
  • margin


Box Model Properties:-


  • Top
  • Right
  • Bottom
  • Left


Box Model Diagram:-



Further Explanation:-


CSS uses the box model to determine how big the boxes are and how to place them. When the box is set to border-box then its total width will be the actual width of the content plus padding left and right. The same goes for its height. For example, the total width of the content is 50px and its padding is 5px on each side. The total width of the box will be 60px and the total height will be also 60px.

Code Explanation

All Tutorials related to CSS Advance

All Sections related to CSS