[CSS] margin과 padding에 대하여 알아보기

안녕하세요.

 

티스토리 스킨 편집을 하다 보면 HTML보다 CSS 편집이 훨씬 많이 일어납니다.

 

CSS 속성 마진, 패딩

 

CSS 편집 중에 가장 많이 접하는 스타일 속성이 margin과 padding입니다. margin과 padding은 간단히 이해하면 어떤 콘텐츠 영역의 주변 여백을 지정하는 스타일 속성입니다.

 

Margin, Padding 예시

 

웹사이트에 접속해서 크롬의 개발자 도구를 열고 (단축키 F12), 어떠한 콘텐츠 영역을 마우스로 선택해보면 위의 그림을 볼 수가 있습니다. 파란색 1080x1236px 영역이 콘텐츠 영역의 크기이고 padding 20px + margin 236.5px = 256.5px의 좌/우 여백을 가지고 있는 형태입니다.

 

마진과 패딩의 차이점은 경계선(border)을 기준으로 나뉩니다.

경계선 외부의 여백을 마진, 내부의 여백을 패딩이라고 보시면 쉽습니다. 전체 콘텐츠 영역의 마진을 잡아놓은 상태에서 일부 영역의 여백을 조절하고 싶을 때 패딩을 사용하는 경우가 많습니다.

 

Padding 예시

 

위의 그림을 예로 들면, 전체 콘텐츠 영역의 마진을 잡아둔 상태에서 “전체 글” 문구에 왼쪽 패딩 50px를 적용한 모습입니다.

 

마진과 패딩 모두 아래와 같이 코드를 표현할 수 있습니다.

 

1. margin: 20px 10px 30px 0;

- 상/하/좌/우 여백이 모두 다를 경우에 사용

- 시계 방향으로 상측 마진 20px, 우측 마진 10px, 하측 마진 30px, 좌측 마진 0

 

2. margin: 20px 0 30px;

- 상/하 여백이 다르고 좌/우 여백이 동일한 경우에 사용

- 상측 마진 20px, 좌/우 마진 0, 하측 마진 30px

 

3. margin: 20px 0;

- 상/하 여백이 같고, 좌/우 여백이 같은 경우에 사용 (마주 보는 방향의 여백이 같을 경우)

- 상/하 마진 20px, 좌/우 마진 0

 

4. margin: 20px;

- 상/하/좌/우 모두 여백이 동일한 경우에 사용

- 상/하/좌/우 마진 20px

 

위의 표현들처럼 margin, padding의 값을 4개, 3개, 2개, 1개로 표현할 수 있는데 경우에 맞게 활용하시면 됩니다. 단위는 px, cm, %를 사용할 수 있으나 기본적으로 px 단위를 가장 많이 사용합니다.

 

방문해 주셔서 감사합니다.

 

행복한 하루 보내세요 ^^