The CSS Box Model

CSS Box Model

The CSS Box Model

모든 HTML 요소는 상자로 간주 할 수 있습니다. CSS에서는 디자인과 레이아웃에 대해 "박스 모델"이라는 용어가 사용됩니다.

CSS 상자 모델은 본질적으로 모든 HTML 요소를 감싸는 상자입니다. 여백, 테두리, 패딩 및 실제 내용으로 구성됩니다. 아래 이미지는 상자 모델을 보여줍니다.

다른 부분에 대한 설명 :

Content - 텍스트와 이미지가 나타나는 상자의 내용

Padding - 내용 주변의 영역을 지 웁니다. 패딩은 투명합니다.

Border - 패딩과 내용을 둘러싼 경계

Margin - 경계 외부 영역을 지 웁니다. 마진은 투명

Example

div {

    width: 300px;

    border: 25px solid green;

    padding: 25px;

    margin: 25px;

}

Width and Height of an Element

모든 브라우저에서 요소의 너비와 높이를 올바르게 설정하려면 상자 모델의 작동 방식을 알아야합니다.

중요 : CSS로 요소의 너비 및 높이 속성을 설정하면 내용 영역의 너비와 높이를 설정하기 만하면됩니다. 요소의 전체 크기를 계산하려면 패딩, 테두리 및 여백도 추가해야합니다.

총 너비가 350px가되도록 <div> 요소 스타일을 지정한다고 가정 해 보겠습니다.

Example

div {

    width: 320px;

    padding: 10px;

    border: 5px solid gray;

    margin: 0; 

}

Here is the math:

320px (width)

+ 20px (left + right padding)

+ 10px (left + right border)

+ 0px (left + right margin)

= 350px

요소의 전체 너비는 다음과 같이 계산되어야합니다.

총 요소 너비 = 너비 + 왼쪽 패딩 + 오른쪽 패딩 + 왼쪽 테두리 + 오른쪽 테두리 + 왼쪽 여백 + 오른쪽 여백

요소의 전체 높이는 다음과 같이 계산되어야합니다.

총 요소 높이 = 높이 + 위쪽 채우기 + 아래쪽 채우기 + 위쪽 테두리 + 아래쪽 테두리 + 위쪽 여백 + 아래쪽 여백

이전 IE에 대한 참고 사항 : Internet Explorer 8 및 이전 버전에서는 width 속성에 패딩 및 테두리가 포함됩니다. 이 문제를 해결하려면 <! DOCTYPE html>을 HTML 페이지에 추가하십시오.