TIL 02. Inline vs Block vs Inline-Block

Inline

• 줄바꿈을 하지 않는다. 여러 inline 태그들이 있으면 다음줄로 넘어가지 않고 그 줄에 이어서 진행된다.

• 대표적으로 span, a 등이 있다.

• margin 과 padding 의 top / bottom 적용이 불가하다

• width 와 height 를 마음대로 변경할 수 없다

• line height 변경 불가

Block

• Inline 과 반대로 여러 block 태그들이 있으면 다음줄로 넘어간다

• 대표적으로 div, p, h1 등이 있다

• margin 과 padding 의 top / bottom 적용 가능

• width 와 height 를 마음대로 변경 가능

• line height 변경 가능

Inline-Block

• inline의 특징 + block의 특징 을 가지고 있다

• 즉 inine의 특징 여러 태그들이 있으면 줄바꿈이 되지 않는다 + block의 특징 margin 과 padding , 그리고 width 와 height, line height 들을 변경할수 있다.