CSS 상자 모델
모든 HTML 요소는 상자로 간주될 수 있습니다.
CSS 상자 모델
CSS에서 "박스 모델"이라는 용어는 디자인과 레이아웃에 대해 이야기할 때 사용됩니다.
CSS 상자 모델은 기본적으로 모든 HTML 요소를 감싸는 상자입니다. 여백, 테두리, 패딩 및 실제 콘텐츠로 구성됩니다. 아래 이미지는 상자 모델을 보여줍니다.
다른 부분에 대한 설명:
- 내용 - 텍스트와 이미지가 표시되는 상자의 내용
- 패딩 - 콘텐츠 주변 영역을 지웁니다. 패딩이 투명하다
- 테두리 - 패딩과 콘텐츠를 둘러싸는 테두리
- 여백 - 테두리 밖의 영역을 지웁니다. 여백이 투명하다
상자 모델을 사용하면 요소 주위에 테두리를 추가하고 요소 사이의 공간을 정의할 수 있습니다.
예시
박스 모델 시연:
div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}
요소의 너비와 높이
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
Example
This <div> element will have a total width of 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Here is the calculation:
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin