[ CSS 입문 ] margin, padding 속성

| 개요

margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다.

width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다.

한 선택자의 바깥쪽으로 여백을 넣고 싶다고 한다면 "margin" 한 선택자의 안쪽으로 여백을 넣고 싶다고 한다면 "padding" 으로 기억을 하면 쉽습니다.

 

단, 여기서 바깥쪽 여백을 주는 margin을 입력한다면 선택자의 전체 width값에는 변화가 없습니다.

바깥쪽을 기준으로 여백을 주므로써 선택자의 위치를 변경해줄때 사용될 수 있습니다.

 

안쪽 여백을 주는 padding의 경우 선택자의 전체 width값이나 height값이 변경이 됩니다.

기존 width값과 height값을 유지하고 싶다면 padding을 준만큼 width와 height에서 값을 빼야할것입니다.

선택자의 안쪽을 기준으로 선택자 안의 내용의 위치값을 잡을 때 사용될 수 있습니다.

 

 

| 방향

margin과 padding 속성은 4면의 방향을 각각 다르게 설정할 수 있습니다.

#box { margin:20px; } /*4면 상하좌우 모두에 바깥여백 20px을 줍니다.*/
#box { margin:30px 10px; } /*상하에는 30px, 좌우에는 10px 바깥여백을 줍니다.*/
#box { margin:30px 10px 20px 50px; } /*위쪽으로 30px, 오른쪽으로 10px, 아래쪽으로 20px, 왼쪽으로 50px 바깥여백을 줍니다.*/
#box { margin:30px 10px 40px; } /*위쪽으로 30px, 좌우로 10px, 아래쪽으로 40px 바깥여백을 줍니다.*/

위 내용을 보면 margin과 padding의 방향은 각각 띄어쓰기로 구분되고 순서는 위쪽부터 시계방향으로 "위 오른쪽 아래 왼쪽" 순서입니다. margin과 padding은 이렇게 한번에 작성도 가능하지만 각각 별도의 속성이 존재 합니다.

 

• margin-top : 위쪽 바깥여백

• margin-right : 오른쪽 바깥여백

• margin-bottom : 아래쪽 바깥여백

• margin-left : 왼쪽 바깥여백

• padding-top : 위쪽 안쪽 여백

• padding-right : 오른쪽 안쪽 여백

• padding-bottom : 아래쪽 안쪽 여백

• padding-left : 왼쪽 안쪽 여백

 

위 속성을 이용해 한쪽 방향의 margin, padding도 스타일을 줄 수 있습니다.