margin & padding - 여백 관련 프로퍼티, margin - 바깥쪽 여백 관련 프로퍼티, padding - 안쪽 여백 관련 프로퍼티

 

margin - 바깥쪽 여백 관련 프로퍼티

바깥쪽 여백을 설정하는 속성

프로퍼티	설명
margin-top	바깥쪽 위쪽 마진 설정
margin-right	바깥쪽 오른쪽  마진 설정
margin-bottom	바깥쪽 아래쪽  마진 설정
margin-left	바깥쪽 왼쪽  마진 설정

 

 

 

padding - 안쪽 여백 관련 프로퍼티

콘텐츠 영역과 테두리 사이의 여백을 설정하는 속성

프로퍼티	설명
padding-top	안쪽 위쪽 패딩 설정
padding-right	안쪽 오른쪽  패딩 설정
padding-bottom	안쪽 아래쪽  패딩 설정
padding-left	안쪽 왼쪽  패딩 설정

 

 

margin/padding 프로퍼티 값

·       한꺼번에 박스 안쪽 여백의 각 방향의 영역을 지정합니다.

·       속성값을 1개 ~ 4개까지 각각 표시하여 지정합니다.

·       길이나 백분율로 지정 가능합니다.

 

프로퍼티 값	설명
기본값	0 할당
auto	auto로 할당
길이	고정된 값 할당
백분율	백분율 값 할당

 

값 갯수	설명
값 1개	네방향 모두 동일
값 2개	위, 아래 여백은 첫 번째 값, 오른쪽, 왼쪽 여백은 두 번째 값
값 3개	위는 첫 번째 값, 오른쪽과 왼쪽은 두 번째 값, 아래는 세 번째 값
값 4개	위, 오른쪽, 아래, 왼쪽의 순서