이지코드 - 여백

2018-03-11 21:50:27 작성

margin

border

padding

content

margin: length|auto|initial|inherit;

테두리 외곽의 여백입니다.
auto는 브라우저가 자동으로 마진값을 계산합니다.

모든 방향 값 설정시 공백으로 구분
값의 개수	사용 방법	예	설명
값이 4개 있을 경우	margin : 상 우 하 좌	margin: 10px 15px 15px 20px;	상: 10px, 우: 15px, 하: 15px, 좌: 20px
값이 3개 있을 경우	margin : 상 우좌 하	margin: 10px 15px 15px;	상: 10px, 우: 15px, 하: 15px, 좌: 15px
값이 2개 있을 경우	margin : 상하 우좌	margin: 10px 15px;	상: 10px, 우: 15px, 하: 10px, 좌: 15px
값이 1개 있을 경우	margin : 상우하좌	margin: 10px	상: 10px, 우: 10px, 하: 10px, 좌: 10px

위의 적용 방법은 padding도 동일합니다.
위로부터 시계방향 순서로 적용됩니다.

요소의 상단과 하단 마진이 겹칠때에는 둘중 큰 마진으로만 적용됩니다.
이것은 수평(왼쪽 및 오른쪽) 마진에서는 발생하지 않습니다.

padding: length|initial|inherit;

테두리 안쪽의 여백입니다.