꾸준히 합시다
CSS 박스 모델 본문
CSS 박스 모델
모든 HTML 요소는 박스 모양으로 구성되기 때문에, 이를 박스 모델이라고 한다.
박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다.
- content: 박스의 실질적 내용으로, 텍스트나 이미지 등 요소의 실제 내용이 들어간다.
- padding: content와 border 사이에 있는 안쪽 여백이다.
- border: content와 padding을 감싸는 테두리이다.
- margin: border를 기준으로 이웃하는 요소 사이의 간격이다.
박스 모델의 규칙
- 블록 요소의 크기는 width, height, padding, border, margin에 의해 계산된다.
- 기본적으로 padding과 border는 요소의 width와 height의 일부가 아니다.
- height가 지정되어 있지 않으면, 블록 요소는 포함하고 있는 내용만큼의 높이를 가지게 되고 이것에 padding을 더한다. (float가 아닌 경우에만. float 적용 시, 부모 height가 0이 되는 현상이 발생한다.)
- width가 지정되지 있지 않으면, 블록 요소는 (부모의 width - padding)에 맞게 적용된다.
Comments