[CSS] 마진(margin) 그리고 패딩(padding) 이란?

 

🌈 마진 (margin) "바깥 여백"

마진은 요소 주변 여백을 뜻한다. 마진의 크기를 조절해 다른 요소 사이들 간의 간격을 남겨 User-friendly한 UI를 만들 수 있다.

 

💡 사용법

𝟏. border 를 기준으로 위 / 오른쪽 / 아래 / 왼쪽 따로 지정하는 방법

margin-top : 위 여백

margin-right : 오른쪽 여백

margin-bottom : 아래 여백

margin-left : 왼쪽 여백

 

𝟐. 4가지 방향을 한 번에 지정하는 방법

margin : [위] [오른쪽] [아래] [왼쪽]

 

* margin은 음수 값이 적용된다.

* auto 를 사용하여 가운데 정렬이 가능하다. (사용법: margin: auto; margin: 0 auto;)

 

 

🌈 패딩(padding) "안쪽 여백"

padding은 content 영역과 border 사이의 여백을 나타내는 영역이다. content 영역이 배경색 혹은 배경 이미지를 가질 때 이 padding 영역까지도 영향을 미친다. 

 

💡 사용법

𝟏. border 를 기준으로 위 / 오른쪽 / 아래 / 왼쪽 따로 지정하는 방법

padding-top : 위 여백

padding-right : 오른쪽 여백

padding-bottom : 아래 여백

padding-left : 왼쪽 여백

 

𝟐. 4가지 방향을 한 번에 지정하는 방법

padding : [위] [오른쪽] [아래] [왼쪽]

 

* padding은 음수 값이 적용되지 않는다.

* padding은 auto로 선언할 수 없다.