HTML Padding & Spacing
Padding is the space inside an HTML element, between its content and its border.
Spacing (Margin) is the space outside an HTML element, creating distance between it and other elements.
Diagram
Margin (Outside Space)
┌─────────────────────────────┐
│ │
│ Border │
│ ┌─────────────────────┐ │
│ │ Padding │ │
│ │ ┌───────────────┐ │ │
│ │ │ Content │ │ │
│ │ └───────────────┘ │ │
│ └─────────────────────┘ │
│ │
└─────────────────────────────┘
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
border: 2px solid black;
padding: 20px; /* Space inside the border */
margin: 30px; /* Space outside the border */
}
</style>
</head>
<body>
<div class="box">
This is a box with padding and margin.
</div>
</body>
</html>
Output Concept
← Margin →
+-----------------------+
| Padding |
| +---------------+ |
| | Content | |
| +---------------+ |
+-----------------------+
Types of Padding
padding: 20px; /* All four sides */
padding: 10px 20px; /* Top/Bottom | Left/Right */
padding: 10px 15px 20px 25px; /* Top | Right | Bottom | Left */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;
Types of Margin (Spacing)
margin: 20px;
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
Difference Between Padding and Margin
| Padding | Margin |
|---|---|
| Space inside the border | Space outside the border |
| Increases the element's inner area | Creates space between elements |
| Background color extends into the padding | Background color does not extend into the margin |
Memory Tip:
- Padding = Inside space (content ↔ border)
- Margin = Outside space (border ↔ other elements)
0 Comments