CSS 속성(2) - 외부 여백(margin) & 내부 여백(padding)

외부 여백(margin)

margin은 요소의 외부 여백(공간)을 지정하는 단축 속성입니다.

* 음수를 사용할 수 있습니다!

margin은 0란 기본값(외부 여백 없음)이 들어 있으며,

auto로 브라우저가 여백을 계산해서 지정할 수 있습니다.

auto같은 경우는 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용합니다.

너비 지정시, px, em, vw등 단위로 지정할 수 있습니다.

%를 사용하면 부모 요소의 가로 너비에 대한 비율로 지정됩니다.

 

margin는 단축 속성여서 아래 특징을 갖고 있습니다.

margin:  top, right, bottom, left  ;

margin:  top, bottom   left, right  ;

margin:  top   left, right   bottom  ;

margin:  top   right   bottom   left  ;

 

margin에 값을 1개만 넣어면, 상하좌우 4개 방향을 동시에 적용됩니다.

margin에 값을 2개를 넣었고 가운데 띄어쓰기 있으면,

앞에 값은 상하 방향에 적용되며, 뒤에 값은 좌우 방향에 적용됩니다.

margin에 값을 3개를 각각 띄어쓰기하면서 넣었다면,

첫 번째 값은 상 방향에 적용되고, 두 번째 값은 좌우 방향에 적용되며,

마지막 값은 하 방향에 적용됩니다.

margin에 값을 4개를 각각 띄어쓰기하면서 넣었다면,

상, 우, 하, 좌, 시계방향으로 각각 적용됩니다.

 

margin-방향은 요소의 외부 여백(공간)을 지정하는 기타 개별 속성들입니다.

margin-top

margin-bottom

margin-left

margin-right

 

 

내부 여백(padding)

padding은 요소의 내부 여백(공간)을 지정하는 단축 속성입니다.

 * 요소의 크기가 늘어납니다!

padding은 0란 기본값(내부 여백 없음)이 들어 있으며,

너비 지정시, px, em, vw등 단위로 지정할 수 있습니다.

%를 사용하면 부모 요소의 가로 너비에 대한 비율로 지정됩니다.

 

padding는 단축 속성여서 아래 특징을 갖고 있습니다.

padding:  top, right, bottom, left  ;

padding:  top, bottom   left, right  ;

padding:  top   left, right   bottom  ;

padding:  top   right   bottom   left  ;

padding에 값을 1개만 넣어면, 상하좌우 4개 방향을 동시에 적용됩니다.

padding에 값을 2개를 넣었고 가운데 띄어쓰기 있으면,

앞에 값은 상하 방향에 적용되며, 뒤에 값은 좌우 방향에 적용됩니다.

padding에 값을 3개를 각각 띄어쓰기하면서 넣었다면,

첫 번째 값은 상 방향에 적용되고, 두 번째 값은 좌우 방향에 적용되며,

마지막 값은 하 방향에 적용됩니다.

padding에 값을 4개를 각각 띄어쓰기하면서 넣었다면,

상, 우, 하, 좌, 시계방향으로 각각 적용됩니다.

 

padding-방향은 요소의 내부 여백(공간)을 지정하는 기타 개별 속성들입니다.

padding-top

padding-bottom

padding-left

padding-right