[Flutter] Margin과 Padding의 차이

차이점

결론부터 말하면, Margin은 위젯 바깥쪽(외부여백)이고 Padding은 위젯 안쪽(내부여백)을 의미한다.

 

Container(
    color: Colors.amber,
    width: double.infinity,
    margin: const EdgeInsets.only(top: 8),
    padding: const EdgeInsets.symmetric(vertical: 30),
    child: ...
)

 

 

EdgeInsets란?

플러터에서는 margin, padding을 줄 때 css, js와 달리 EdgeInsets라는 클래스를 사용한다.

 

EdgeInsets에서 margin과 padding을 주는 방법

EdgeInsets.all(5)	// 전채 영역

EdgeInsets.only(top: 5)	// 특정 영역

EdgeInsets.fromLTRB(5, 10, 0, 0)	// 각각 (left, top, right, bottom)

EdgeInsets.symmetric(horizontal: 5, vertical: 10)	// 가로(위 아래), 세로(왼쪽 오른쪽)

 

references

https://docs.flutter.dev/development/ui/layout