What is CSS Box Model

In the web all elements have a rectangular box area, every box has four properties: content area, padding size, border size, and margin size. When all four properties are merged then it's converted in the CSS box model. In this example:
Content area: where we are placing web element as text, image, video etc.
Padding: Space around the content area.
Border: Size around the padding and content area.
Margin: Space around the border outside the area.

CSS Box Model = Content Area + Padding + Border + Margin
400px = width:300px + Padding (padding-left:20px + padding-right:20px) + Border(border-left: 5px + border-right:5px) + Margin(margin-left: 25px + margin-right: 25px)

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.