Box Model Concept

In CSS, absolutely everything — from a tiny icon to a huge footer — is a rectangle. Even if an element looks like a circle, to the browser it's still a square with cut corners.

Four Layers of Your Design:

1. Content: The element's core. Text, image, or video. Its size can be set with width and height properties.
2. Padding: The layer between content and border.
   • Important: Padding increases the clickable area of an element (e.g., a button).
3. Border: The block's boundary. It has thickness, style, and color.
4. Margin: The element's " personal space " . Separates it from neighbors.

Modern Approach: Logical Properties

Previously we only used top/right/bottom/left. But in modern web we often work with vertical languages or Arabic script. Logical properties came to help:

• Block: Text flow direction (usually top to bottom).
• Inline: Line direction (left to right).
• Instead of padding-left, pros increasingly write padding-inline-start.