블록 요소의 너비와 높이

 

블록 요소는 너비와 높이가 모두 반영됩니다.

 

 <div style="background-color:#22ff11; width:100px; height:100px;">div1</div>
 <div style="background-color:#aaffaa; ">div2</div>

 

위와 같이 div1에 높이와 너비를 지정하면 반영되 출력되는 결과는 아래와 같습니다.

 

[너비와 높이지 지정된 블록 요소 예]

 

하지만 min-width, min-height 속성을 부여해도 최소 너비값과 최소 높이값이 적용되지 않습니다.

 

너비는 지정하지 않는다면 한 라인 전체를 채웁니다. 이 때 콘텐츠가 없다면 줄 또한 표시되지 않습니다.

 

 <div style="background-color:#22ff11; width:100px; height:100px;">div1</div>
 <div style="background-color:#aaffaa; "></div>

 

위 결과는 아래와 같습니다.

[콘텐츠 영역에 내용이 없어 표시되지 않은 div 예]

 

 

만약 너비가 지정되어 있는데, 콘텐츠가 영역을 넘긴다면 높이는 자동으로 증가됩니다.

 

 <div style="background-color:#22ff11; width:100px; height:100px;">div1 [콘텐츠 내용] [콘텐츠 내용] [콘텐츠 내용] [콘텐츠 내용] [콘텐츠 내용] [콘텐츠 내용]</div>
 <div style="background-color:#aaffaa; ">div2</div>

 

위 코드의 결과는 다음과 같습니다.

 

[영역이 차지하는 만큼 높이가 증가된 예]