[CSS] 안쪽, 바깥쪽 여백 넣기 - margin, padding 속성

어떤 글자, 혹은 표 등의 공간에 여백을 넣는 방법에 대해 알아보겠습니다.

여백을 넣는 속성에는 margin과 padding이 있습니다.

 

---

 

1. margin 속성

margin : 10px 20px 30px 40px;

- margin은 바깥쪽 여백의 값을 주는 속성입니다.

 

- 속성은 시계 방향인 위, 오른쪽, 아래, 왼쪽으로 적용됩니다.

- 위 : 10px

- 오른쪽 : 20px

- 아래 : 30px

- 왼쪽 : 40px

 

 

margin : 10px 20px 30px;

- 값을 세개만 준다면 오른쪽과 왼쪽이 함께 적용됩니다.

 

- 위 : 10px

- 오른쪽, 왼쪽 : 20px

- 아래 : 30px

 

 

margin : 10px 20px;

- 값을 두개만 줄 수도 있습니다.

 

- 그러면 위, 아래 / 오른쪽, 왼쪽을 한번에 주게 됩니다.

- 위, 아래 : 10px

- 오른쪽, 왼쪽 : 20px

 

 

margin : 20px;

- 값을 하나만 주면 위, 오른쪽, 아래, 왼쪽 모두 적용됩니다.

- 위, 오른쪽, 아래, 왼쪽 : 20px

 

 

margin-top : 10px;
margin-right : 20px;
margin-bottom : 30px;
margin-left : 40px;

- 위 예제처럼 한 번에 적용할 수도 있지만, 따로따로 적용할 수도 있습니다.

- margin-top은 위, margin-right는 오른쪽, margin-bottom은 아래, margin-left는 왼쪽입니다.

 

 

2. padding 속성

padding : 50px 40px 30px 20px;

- padding은 안쪽 여백의 값을 주는 속성입니다.

 

- 속성은 margin과 같이 시계 방향인 위, 오른쪽, 아래, 왼쪽으로 적용됩니다.

- 위 : 50px

- 오른쪽 : 40px

- 아래 : 30px

- 왼쪽 : 20px

 

 

padding : 50px 40px 30px;

- margin처럼 값을 세개만 준다면 오른쪽과 왼쪽이 함께 적용됩니다.

 

- 위 : 50px

- 오른쪽, 왼쪽 : 40px

- 아래 : 30px

 

 

padding : 50px 40px;

- 값을 두개만 줄 수도 있습니다.

 

- 그러면 위, 아래 / 오른쪽, 왼쪽을 한번에 주게 됩니다.

- 위, 아래 : 50px

- 오른쪽, 왼쪽 : 40px

 

 

padding : 50px;

- 값을 하나만 주면 위, 오른쪽, 아래, 왼쪽 모두 적용됩니다.

- 위, 오른쪽, 아래, 왼쪽 : 50px

 

 

padding-top : 50px;
padding-right : 40px;
padding-bottom : 30px;
padding-left : 20px;

- padding도 margin과 마찬가지로 따로따로 속성을 적용할 수 있습니다.

- padding-top은 위, padding-right는 오른쪽, padding-bottom은 아래, padding-left는 왼쪽입니다.

 

 

 

이상으로 CSS로 안쪽, 바깥쪽 여백을 넣는 방법에 대해 알아보았습니다.

 

---