CSS box model
Notes:
HTML - Introduction to CSS box model:
Consider every html element as a box for holding some content.
CSS box model is a box that wraps html element
CSS box model contains at its core the actual content
Actual content is wrapped by padding
Padding is wrapped by border.
Border is wrapped by margin.
While layout designing, each of them can be controlled independently using CSS.
Content area indicates the actual content in the html element
Padding indicates the space around the actual content
Border indicates the border around the padding or content
Margin indicates the space around the border or padding or content
Interview Questions:
1. In CSS box model total width or actual width of an HTML element is calculated using __________ formula.
a. content width + padding left + padding right
b. content width + padding left + padding right + border left + border right + margin left + margin right
c. content width + padding left + padding right + border left + border right
d. padding left + padding right + border left + border right + margin left + margin right
Answer: b
