인라인 요소의 너비와 높이

 

인라인 요소도 너비와 높이가 모두 반영됩니다.

 

 <span style="background-color:#22ff11; width:100px; height:100px;">span1</span>
 <span style="background-color:#aaffaa; ">span2</span>

 

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

 

[인라인 요소에 너비와 높이를 준 경우]

 

블록 요소와 마찬가지로 min-width 속성과 min-height 속성은 적용되지 않습니다.

 

또한 콘텐츠의 영역을 벗어나는 경우 높이가 자동으로 증가됩니다.

 

<span style="background-color:#22ff11; width:100px; height:100px;">span1 [콘텐츠] [콘텐츠] [콘텐츠] [콘텐츠] [콘텐츠] [콘텐츠] [콘텐츠] [콘텐츠] </span>
 <span style="background-color:#aaffaa; ">span2</span>

 

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

 

[높이가 증가되는 예]