[CSS] padding과 margin의 차이

Padding

padding 속성은 내용(content)과 테두리(border) 사이의 간격인 padding 영역의 크기를 설정한다. 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 받는다.

padding 속성

1. padding : 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있다.
2. padding-top : 윗쪽의 padding 값을 설정한다.
3. padding-right : 오른쪽의 padding 값을 설정한다.
4. padding-bottom : 아래쪽의 padding 값을 설정한다.
5. padding-left : 왼쪽의 padding 값을 설정한다.

 

Margin

margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다. 마진 영역은 패딩 영역과는 달리 backround-color 속성으로 설정하는 배경색의 영향을 받지 않는다. 

margin 속성

1. margin : 모든 margin 속성을 이용한 스타일을 한 줄에 설정할 수 있다.
2. margin-top : 윗쪽의 margin 값을 설정한다.
3. margin-right : 오른쪽의 margin 값을 설정한다.
4. margin-bottom : 아래쪽의 margin 값을 설정한다.
5. margin-left : 왼쪽의 margin 값을 설정한다.

 

    div.mar {
      margin-top: -25px;
      margin-right: 10px;
      margin-bottom: 30px;
      margin-left: 100px;
    }

margin 속성값을 음수로 설정하여 해당 요소를 다른 요소의 위에 겹치게 할 수도 있다.

 

margin 속성값에 auto 사용

    div.mar {
      margin: auto;
    }

margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 margin 값을 자동으로 설정한다. 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 된다. 해당 요소는 그 요소를 포함하고 있는 부모(parent) 요소의 정중앙에 위치한다.

 

margin 축약 표현

div.four { margin: -25px 10px 30px 100px; }

4개의 margin 속성값을 가질 때는 top, right, bottom, left 순으로 설정한다.

 

Padding과 Margin의 차이

margin은 음수값과 auto 적용이 가능하지만 padding은 불가능하다.

Margin과 Padding의 사용법

1. 속성 4개 사용

• 시계방향(위, 오른쪽, 아래, 왼쪽) 순서로 값을 주면 된다.
  • 예: margin: 10px 5px 10px 5px

2. 속성 2개 사용

• 2개의 속성만 사용할 경우, 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백을 의미한다.
  • 예: margin: 10px 5px

3. 속성 1개 사용

• 1개의 속성만 사용할 경우, 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 된다.

4. padding 속성 1개 사용

• 패딩의 1개 속성만 사용할 경우, 안쪽여백이 변경된다.
  • 예: padding: 20px

5. 단일 속성 부여

• 위, 오른쪽, 아래, 왼쪽 중 하나에만 값을 부여하고 싶은 경우, 하단과 같이 방향을 지정해주면 된다.
  • 예: margin-right: 20px, padding-top: 10px

6. 가운데 정렬

• auto를 이용한다. padding은 auto값 선언 불가.
  • 예: margin: auto

 

 

 

 

 

참고링크

[CSS] Margin, Padding 차이점과 사용법 정리

 

코딩교육 티씨피스쿨