2. What is the CSS Box Model?
•The box model is a fundamental concept in web
design.
•It defines how elements are structured and how
their dimensions are calculated.
4. The Components of the Box Model
•Content: The actual content of the element (text,
images, etc.)
•Padding: Space between the content and the border.
•Border: Surrounds the padding (if present) and the
content.
•Margin: Outermost space around the element
(separates elements from each other).
5. Box Model Properties in CSS
Width and Height: Defines the content area of the box.
Padding: Can be set for each side (top, right, bottom,
left).
Border: Can also be set for each side (top, right,
bottom, left).
Margin: Sets the space between the box and other
elements.
6. Box-Sizing Property
•Default Behavior: The default box-sizing is content-box, meaning padding and border
are added to the width/height.
•Alternative Behavior: box-sizing: border-box; includes padding and border within the
element’s width/height, preventing overflow.
•When to use: Use border-box for simpler layouts and to avoid unexpected
overflow.
7. Working with Box Model in CSS
Example 1: Simple box with padding, border, and margin
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
margin: 15px;
}
