한 줄 요약
화면의 모든 요소는 상자이고, padding은 상자 안쪽 완충재, margin은 상자와 상자 사이의 간격입니다.
비유로 이해하기
택배 상자를 떠올려 보세요. 가운데에 물건(콘텐츠)이 있고, 그 주변을 뽁뽁이(padding)가 감싸고, 바깥에 상자 벽(border)이 있습니다. 그리고 창고에 상자를 쌓을 때 상자끼리 띄워 두는 거리가 margin입니다.
비교해 보기
- padding을 늘리면 상자 자체가 뚱뚱해집니다. 배경색도 함께 넓어져요.
- margin을 늘리면 상자 크기는 그대로, 주변과의 거리만 멀어집니다. 배경색이 칠해지지 않아요.
- 헷갈릴 땐 이렇게 물어보세요. “상자 안이 답답한가, 상자끼리 붙어 있는가?”
직접 실행해 보기
padding과 margin 숫자를 하나씩 바꿔 보세요. 어느 쪽이 초록 상자를 키우고, 어느 쪽이 상자 사이를 벌리는지 확인할 수 있습니다.
GenerateBlocks에서는
GenerateBlocks의 스타일 패널에서 Spacing(간격) 항목이 바로 이 상자 규칙입니다. 섹션 안쪽을 넉넉하게 하고 싶으면 Padding, 카드끼리 띄우고 싶으면 Margin이나 Gap을 조절하세요.