CSS margin, padding

style에서 margin과 padding은 border를 기준으로 나눌 수 있습니다.

border를 기준으로 margin은 바깥쪽을, padding은 안쪽을 뜻합니다.

 

padding은 초록색을, border는 노란색, margin을 주황색을 뜻합니다.

가장 안의 녹색은 데이터를 담는 공간입니다.

 

margin과 padding 둘 다 공통으로 간격을 조절할 수 있는데, 상하좌우 각각 따로 편집이 가능합니다.

 

margin  : 10px (상하좌우 10px씩)

padding: 10px 20px (상하 10px, 좌우 20px)

margin  : 10px 20px 30px (위10px 좌우20px 하30px)

padding: 10px 20px 30px 40px (상10px 우20px 하30px 좌40px)

 

각각 둘 다 위치 조절을 통하여 원하는 값으로 설정 할 수 있습니다.