CSS Box Model

CSS Box Model

Every HTML element is a box consisting of:

1. Content – The actual text or image.
2. Padding – Space between content and border.
3. Border – The outline around an element.
4. Margin – Space outside the border.

Example

div {
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

Understanding the box model is key to proper spacing and layout control.

---

CSS Flexbox

Flexbox makes it easier to create responsive layouts.

Basic Flexbox Example

.container {
    display: flex;
    justify-content: space-between;
}

This arranges items in a flexible, adaptable way—great for modern web design.