YT Video:

https://youtu.be/H0cJ0gUlgE8?si=r7rb_cAsITtBf3Xi

If we just define the container with no child, the container takes the whole space of body, but if we add a child inside the container, the container takes the space of only the child widget.

Padding: Inside space of a widget, i.e. space between the widget and its child widget.

Margin: Outside space of a widget, i.e. space between the widget and its parent widget.

So, The distance between outer widget and inner widget is:

<aside> ➡️ Margin of Inner Widget + Padding of Outer widget

</aside>

See,Problem Faced in syntax of container: Problem:

Tested by varying values in:

      body: Container( //See Syntax for padding in below section
        color: Colors.amber[700],
        padding: EdgeInsets.all(10.0), ///// Outer
        margin: EdgeInsets.all(20.0), /////Outer

        child: Container(
        padding: EdgeInsets.all(30), //////// Inner
        margin: EdgeInsets.all(10.0), //////// Inner
        child: Text(
              'Hello World!',
              style: TextStyle(
                backgroundColor: Colors.purple[300],
                fontSize: 30.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              )),
        color: Colors.purple,
      ),
      ),

Padding Syntax:

Now for padding we don’t specify directly like padding: 20, instead we write:

      body: Container(
        padding: EdgeInsets.all(20.0),
        margin: EdgeInsets.all(20.0),
        child: Text('Hello World!'),
        color: Colors.purple,
      ),

We write with the function EdgeInsets. Now we use different methods like all or LTRB (Left, top, right, bottom) or symmetric, etc. [Similar case for margins]