margin과 padding의 차이

Margin과 Padding 차이

 

다음에 보이는 사진은 HTML박스 모델이다. 간단히 설명하면 다음과 같이 설명할 수 있다

• Margin : Object 와 화면과의 여백(외부 여백)
• Padding : Object 내의 내부 여백

 

각각에 대한 특징들을 살펴보자.

 

Margin 

• 외부 공간 제어 : 마진은 요소의 외부 공간을 제어하는데 사용된다. 즉 요소와 주변 요소 간의 간격을 조절한다.
• 음수 값 허용 : 마진은 음수 값을 가질 수도 있으며, 이는 요소를 주변 요소에 더 가깝게 위치시킨다.

Padding 

• 내부 공간 제어 : 패딩은 요소의 내부 공간을 제어하는데 사용된다. 요소의 내부 여백을 조절하여 내용과 테두리 사이의 간격을 조절한다. 
• 요소 크기에 영향 : 패딩은 요소의 크기에 영향을 미치므로 내용 영역을 확장하거나 축소할 때 사용된다.

 

Margin / Padding 공통점 

• 레이아웃 제어 : Margin / Padding 은 모두 웹페이지 레이아웃을 제어하는데 사용된다. 이들은 각각 외부 공간과 내부 공간을 조절해 요소들 간의 간격이나 내용과 테두리 사이의 여백을 조절하는데 활용된다.
• 상하좌우 설정 가능 : 두 속성은 각각 상/하/좌/우 방향에 대한 값을 개별적으로 설정 할 수 있는 특징을 가지고 있다. 이를 통해 요소의 여백을 다양한 방향으로 조절해서 레이아웃을 더 유연하게 디자인 할 수 있다. 

참고 사이트

https://velog.io/@hyejin4169/CSS-margin-padding-%EC%B0%A8%EC%9D%B4%EC%A0%90%EA%B3%BC-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%A0%95%EB%A6%AC