CSS박스 모델

CSS의 박스 모델

모든 HTML 요소들은 박스로 간주 될 수있다. 디자인 및 레이아웃에 대해 이야기 할 때 CSS에서, 용어 "박스 모델"이 사용됩니다.

CSS의 박스 모델은 기본적으로 모든 HTML 요소를 감싸는 상자입니다. 여백, 테두리, 패딩, 실제 내용 :이 구성되어 있습니다.

이미지는 아래의 박스 모델을 보여줍니다

다른 부분의 설명 :

박스 모델은 우리가 요소 주위에 테두리를 추가하고, 요소 사이의 공간을 정의 할 수 있습니다.

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

모든 브라우저에서 올바르게 요소의 폭 및 높이를 설정하기 위해, 사용자는 박스 모델이 어떻게 작동하는지 알 필요가있다.

	중요 : CSS와 요소의 폭과 높이 속성을 설정하면, 당신은 단지 콘텐츠 영역의폭과 높이를 설정합니다. 요소의 전체 크기를 계산하려면, 당신은 또한 패딩, 테두리 및 여백을 추가해야합니다.

우리는 스타일을 원하는 가정 <div> 350px의 전체 폭을 갖도록 요소를 :

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

다음은 수학이다 :

320px (폭)
+ 20px (왼쪽 + 오른쪽 패딩)
+ 10px (왼쪽 + 오른쪽 테두리)
+ 0px (왼쪽 + 오른쪽 여백)
= 350px

요소의 전체 폭은 다음과 같이 계산되어야한다 :

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

요소의 전체 높이는 다음과 같이 계산되어야한다 :

총 요소 높이 = 높이 + 위쪽 패딩 + 아래쪽 패딩 + 위쪽 테두리 + 아래쪽 테두리 + 위쪽 여백 + 아래쪽 여백

	오래된 IE를위한 참고 사항 : 인터넷 익스플로러 8 이전 버전의에서 패딩 및 테두리 포함 width 속성을. 이 문제를 해결하려면 추가 <!DOCTYPE html> HTML 페이지에.