CSS box model - Part 1
Notes:
CSS Box Model - Part 1
Why to understand CSS box model?
Understanding CSS box model clearly, will help us do design web page layouts, which are more manageable and easily editable.
Imagine every HTML element as a rectangle box meant to hold content.
Content may be a text, an image, a pdf, a video etc.
Every box includes four important areas.
They are content area, padding area, border area, and margin area.
HTML box with its component areas:
CSS Content area:
The amount of space required to display the content or the area occupied by the content
It is determined by CSS width property and CSS height property
CSS Padding area:
The distance between the content and the border
The empty space or empty area around the content
It is determined by CSS padding property
CSS Border area:
The area occupied by the border
The area around the padding meant to display border
It is determined by CSS border property
CSS Margin area:
The area around the border
The empty space or empty area around the border
It is determined by CSS margin property
Interview Questions:
1. Area outside the border is known as ____________
a. padding area
b. content outside area
c. border outside area
d. margin area
Answer: d
