What is the difference between padding and margin in Flutter?

Overview

In Flutter, padding and margin control the spacing around widgets — but they work differently.

Key Difference

Visual Explanation

textCopy
┌──────────────────────────────────┐
│           MARGIN (outside)       │
│  ┌────────────────────────────┐  │
│  │      Widget Background     │  │
│  │  ┌──────────────────────┐  │  │
│  │  │  PADDING (inside)    │  │  │
│  │  │   [   Content   ]    │  │  │
│  │  └──────────────────────┘  │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

Padding in Flutter

dartCopy
// Using Padding widget
Padding(
  padding: EdgeInsets.all(16),
  child: Text('Hello'),
)

// Using Container padding
Container(
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  color: Colors.blue,
  child: Text('Hello'),
)

Margin in Flutter

Flutter does not have a standalone

Margin

Container

dartCopy
Container(
  margin: EdgeInsets.all(16),   // Space outside the container
  padding: EdgeInsets.all(8),   // Space inside the container
  color: Colors.blue,
  child: Text('Hello'),
)

EdgeInsets Options

dartCopy
EdgeInsets.all(16)                           // Same on all sides
EdgeInsets.symmetric(horizontal: 16, vertical: 8) // Horizontal & vertical
EdgeInsets.only(top: 8, left: 16)            // Specific sides
EdgeInsets.fromLTRB(16, 8, 16, 8)           // Left, Top, Right, Bottom
EdgeInsets.zero                              // No padding

Practical Example

dartCopy
Container(
  margin: EdgeInsets.all(12),    // 12px gap from neighboring widgets
  padding: EdgeInsets.all(16),   // 16px space between border and content
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 4)],
  ),
  child: Text('Card Content'),
)

When to Use What

padding

margin

Padding

SizedBox

Web Analogy: Same as CSS —

textCopy

padding

is inside the box,

textCopy

margin

is outside the box.