여백 속성

목차

1) margin 속성

요소 주변 여백 설정하기

① 현재 요소 주변의 여백. 한 요소와 다른 요소 사이의 간격 조절

② 기본형

margin-top : <크기> | <백분율> | auto

margin-right : <크기> | <백분율> | auto

margin-bottom : <크기> | <백분율> | auto

margin-left : <크기> | <백분율> | auto

margin : <크기> | <백분율> | auto

③ 속성값 

<크기> : 너비나 높이 값을 px나 cm와 같은 단위와 함께 수치로 지정

<백분율> : 박스 모델을 포함하고 있는 부모 요소의 너비나 높이 값을 기준으로 %로 지정

auto : Display 속성에서 지정한 값에 맞게 적절한 값을 자동 지정

④ margin 속성 값 개수에 따른 차이

- 1개 : 네 방향 모두 동일한 값 적용

- 2개 : 첫번째 값은 위아래, 두번째 값은 좌우

- 3개 : 위 , 좌우, 아래

- 4개: top -> right -> bottom -> left (시계 방향) 순으로 적용

 

2) padding 속성

콘텐츠 영역과 테두리 사이 여백 설정하기

① 테두리 안쪽의 여백 설정

② 기본형

padding-top : <크기> | <백분율> | auto

padding-right : <크기> | <백분율> | auto

padding-bottom : <크기> | <백분율> | auto

padding-left : <크기> | <백분율> | auto

padding  : <크기> | <백분율> | auto