테두리를 공부했으니 이제 테두리 안팎의 여백에 대해 공부해보려고 한다.
박스 모델의 여백에는 4가지 면이 존재하는데 속성값 사용 개수에 따라 4면의 여백 크기를 달리 정할 수 있다.
- 여백 4면 모두 적용 : margin: 10px
- 순서대로 위아래, 좌우 여백 값을 지정 : margin: 10px 20px
- 순서대로 위, 좌우, 아래 여백 값 지정 : margin: 10px 20px 15px
- 순서대로 위, 오른쪽, 아래, 왼쪽 여백 값 지정 : margin: 10px 20px 30px 40px
그리고 너비와 높이를 지정했지만 padding속성을 추가하게 되면 요소가 기존보다 커지게 되는 경우가 있다. 이를 방지하기 위해 'box-sizing'이라는 속성을 사용할 수 있다.
- 너비와 높이를 기존대로 유지할 경우 : box-sizing
(기존 너비와 높이에서 padding 값 만큼 빼준다.) - 너비와 높이를 padding 값에 맞춰 늘릴 경우 : content-sizing
hyohyo