display 속성 inline 과 block

1. Inline

inline이란 말 그대로 Inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.

 

대표적인 Inline 엘리먼트로 span이나 a, em 태그 등을 들 수 있다.

 

inline 엘리먼트는 width와 height 속성을 지정해도 효과가 적용되지 않는다.

-> 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다.

또한 , margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

마크업 언어: 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이다.

 

 

 

2. block

block이란 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.

따라서 display 속성이 block으로 지정된 엘리먼트는 전 후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.

 

대표적인 HTML element는 block 요소로, header, footer, p, li, table, div, h1 등이 있다.

 

block 엘리먼트는 Inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 된다.

 

3. inline-block

display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 한 줄에 다른 엘리먼트들과 배치된다.

하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다.

 

즉, inline 의 성질을 가지면서 동시에 사용자가 원하는 대로 모형을 꾸밀 수 있다.