Block vs lnline

html 의 태그들은 Block요소와 lnline요소가 있다

블록요소들은 한 영역을 차지하는 박스형태이고 width(너비)값이 자동으로 100%으로 설정됩니다

• block은 height와 width 값을 지정 할 수 있다.
• block은 margin과 padding을 지정 할 수 있다

인라인요소들은 컨텐츠의

• width와 height를 명시 할 수 없다.
• margin은 위아래엔 적용 되지 않는다.
• padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다

 

block 요소

inline 요소

 

예시

    <p>인라인 요소인 <span>span</span>사용했을때</p>
    
    <p>블럭레벨 요소인 <div>div</div>사용했을때</p>

 

결과

 

인라인 요소인 span이 차지하는 영역 높이와 너비는 컨텐츠만큼(파란색 점선)이고

블럭레벨 요소인 div가 차지하는 영역 높이는 컨텐츠만큼 너비는 100%를 차지합니다(빨간색 점선)