CSS 박스 모델

CSS 상자 모델은 웹 사이트 또는 웹 프로젝트 내에서 항목이 표시되는 방식을 지정하는 데 도움이 되는 일련의 규칙입니다. 요소의 매개 변수, 경계 및 대상 요소 안팎의 간격을 정의합니다.

이것은 당신이 보는 모든 웹 페이지가 직사각형 상자에 싸인 요소로 구성되어 있고 서로 관련되어 배열되어 있음을 의미합니다. 이러한 요소는 해당 요소의 유형에 따라 옆, 위, 아래 및 서로 내에 존재할 수 있습니다.
HTML 요소에는 블록 수준 요소와 인라인 요소의 두 가지 유형이 있습니다. 아래에서 각각에 대해 자세히 살펴보겠습니다.

블록 수준 요소
기본적으로 블록 수준 요소는 새 줄에서 시작하고 사용 가능한 공간의 100%를 차지합니다. 다른 요소 안에 있는 경우 뷰포트 또는 컨테이너의 전체 너비일 수 있습니다. 기본적으로 새 줄에서 시작하기 때문에 블록 수준 요소는 문서의 흐름을 끊습니다. 블록 수준 요소에 적용된 패딩, 테두리 및 여백 속성을 사용하면 다른 요소가 요소 주위의 상자에서 강제로 멀어집니다. . 그 결과, 그리고 컨테이너의 전체 너비에 걸쳐 있다는 사실 때문에 블록 수준 요소는 인라인 요소보다 더 많은 공간을 차지하고 더 큰 구조를 만들 수 있습니다.

_블록 수준 요소에는 다음이 포함됩니다. _

<p> <h1> <h2> <h3> <h4> <h5> <h6> <ol> <ul> <pre> <address> <blockquote> <dl> <div> <fieldset> <form> <hr> <nonscript> <table> 

인라인 요소
기본적으로 인라인 요소는 새 줄에서 시작하거나 뷰포트의 전체 너비를 차지하지 않습니다. 너비 및 높이 속성은 적용되지 않습니다. 블록 수준 요소와 달리 인라인 요소는 문서의 흐름을 끊지 않습니다.

인라인 요소는 다른 인라인 요소와 데이터를 포함할 수 있지만 블록 수준 요소는 포함할 수 없습니다. 예를 들어 단락 요소는 강조 요소를 포함할 수 있지만 제목 요소는 포함할 수 없습니다.

패딩, 테두리 및 여백 속성이 세로로 적용되면 다른 인라인 상자가 요소 주위의 상자에서 강제로 멀어지지 않습니다. 패딩, 테두리 및 여백 속성이 가로로 적용되면 다른 인라인 요소가 요소 주위의 상자에서 멀어집니다.

_인라인 레벨 요소에는 다음이 포함됩니다.

<b> <big> <i> <small> <tt> <abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <strong> <samp> <var>