패딩과 마진의 차이, 한 번에 이해하기!

패딩과 마진, 무엇이 다를까?

웹 개발을 할 때 패딩(Padding)과 마진(Margin)을 헷갈리는 분들이 많아요.

특히, Bubble.io에서 UI 요소 간 간격을 조절할 때 패딩과 마진을 제대로 활용하면 깔끔한 디자인을 만들 수 있습니다.

그럼 패딩과 마진의 차이를 쉽게 설명해볼게요!

패딩과 마진, 무엇이 다를까?

패딩과 마진은 둘 다 요소와 주변 공간의 간격을 조절하는 기능입니다. 하지만 적용되는 위치가 다릅니다.

패딩(Padding) → 요소 안쪽 여백을 늘림
마진(Margin) → 요소 바깥 여백을 늘림

이해하기 쉽게 어깨뽕을 예시로 들어볼게요.

마진(Margin): 옷 바깥에 어깨뽕을 한 것

옷 자체 크기는 그대로지만, 옷 바깥쪽 공간이 커져 다른 옷과의 거리가 멀어지는 것과 같아요.

마진(margin) 예시, 출처: 뮤직뱅크

요소와 요소 사이의 간격을 벌리고 싶다면 마진을 설정하면 됩니다.

패딩(Padding): 옷 안쪽에 어깨뽕을 한 것

옷 자체가 넓어진 것처럼 보이지만, 실제로는 옷 내부의 공간이 넉넉해지는 것이에요.

패딩(padding) 예시, 출처: 라디오스타

버튼 내부의 텍스트와 가장자리 간격을 늘리고 싶다면 패딩을 설정하면 됩니다.

언제 패딩을, 언제 마진을 써야 할까?

버튼 크기를 키우고 싶다면? → 패딩을 조절하세요!
요소 간 거리를 조정하고 싶다면? → 마진을 조절하세요!

이제 패딩과 마진의 개념이 한눈에 들어오죠?

마무리하며

Bubble.io에서 UI 요소를 배치할 때 패딩과 마진을 적절히 활용하면 깔끔하고 직관적인 디자인을 만들 수 있습니다!

하지만 Bubble.io 디자인을 처음 접하셨다면, 직접 실습하면서 배우는 것이 가장 빠른 방법이에요!

무료 강의 보기: 코드 없이 Figma 디자인 그대로! Bubble.io로 웹사이트 만들기

Bubble.io에 대해 궁금한 점이 있다면?

댓글로 남겨주세요! 여러분의 프로젝트가 돋보일 수 있도록 도와드릴게요.