인라인 레벨 엘레멘트의 특성

○ 인라인 레벨 엘레멘트의 줄바꿈

 

: 인라인 레벨 엘레멘트에 영역(너비와 높이)을 지정하지 않았다면, 콘텐츠가 차지하는 영역만 영역으로 인정되며 다른 엘레멘트와 줄 바꿈을 하지 않는다. 대표적인 엘레멘트는 <span>, <a> 등이 있다.

 

<span>
border:1px solid green;
margin:1px;
</span>

<span>인라인 레벨 엘레멘트 테스트</span>

 

 

 

 

하지만 인라인 레벨 엘레멘트 내에서 줄바꿈이 발생하면 영역이 변경된다.

 

<span>인라인 레벨 엘레멘트 테스트<br/>줄바꿈이 발생했을 때 인라인 레벨의 영역 표시</span>

 

 

 

 

 

○ 인라인 엘레멘트에 영역(너비와 높이)을 지정할 경우

 

: 인라인 레벨에서는 영역을 지정해도 영역이 생성되지 않는데, 인라인 레벨에서의 실질적인 영역은 너비(width)인 경우 "콘텐츠가 차지하는 너비 + 패팅 + 보더" 값이 된다. 따라서 인라인 영역은 콘텐츠의 width나 heigth 값에 영향을 받지 않는다.