What is Css box model ? Explanation of Parts of box?

* What is CSS Box Model?

==> The CSS box model as a whole applies to block boxes and defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on a page. Inline boxes use just some of the behavior defined in the box model.

* Parts Of Box :

      Making up a block box in CSS we have the:

  •    Content box:     The area where your content is displayed; size it using properties like inline size and block size or width and height.
  •    Padding box:    The padding sits around the content as white space; size it using padding and related prop.
  •    Border box:      The border box wraps the content and any padding; size it using the border and related property.
  •     Margin box:      The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties. 

    *  The below diagram shows these layers:



Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories