2021-09-17 CSS Inline과 Block 비교

1. Inline Element

- <b>, <i>, <a>, <br>, <img>, <span> 등이 있다.

- content의 너비만큼 라인을 차지하며 한 라인에 여러 개의 요소가 올 수 있다.

- inline 요소의 상·하 여백은 margin이 아닌 line-height에 의해 결정된다.

- inline 요소에는 width, height이 적용되지 않는다.

- inline 요소가 연속 사용되는 경우 약 5px의 외부 margin이 자동 생성된다.

 

 

2. Block Element

- <div>, <form>, <h1~h6>, <header>, <footer>, <hr>, <li>, <ul>, <ol>, <p>, <nav> 등이 있다.

- 화면 전체 너비를 차지한다.

- width : 100% 속성을 기본적으로 가지고 있다. (이로 인해 자동 줄넘김 발생)

 

 

3. display 속성

태그가 Inline인지 Block인지 결정해주는 것은 display 속성이다.

 

(1) display : inline

inline level로 만들어준다.

(2) display : block

block level로 만들어준다.

(3) display : inline-block

inline level이지만 width/height, margin/padding/line-height 스타일이 적용 가능해진다.