[CSS] Block VS Inline

CSS에서 가장 많이 사용하는 속성 중 하나로 display가 있다. 

display는 요소를 어떻게 배치할지를 나타내는데, 일반적으로 block, inline, inline-block이 있다. 

 

Block vs Inline 

block

block은 전체 라인을 모두 가지고 있다. 또한 width 값을 줘서 공간이 남더라도 나머지 공간에 다른 요소가 들어올 수 없다. 

inline

inline은 컨텐츠의 크기만큼의 영역을 가지고 있으며, 한 라인에 여러 요소가 배치될 수 있다. 

 

block의 대표적인 태그로 div가 있고, inline의 대표 태그로 span이 있다. 

여기서 하나의 특징이 더 나오는데, div 안에는 span을 넣을 수 있지만 span 안에는 div를 넣을 수 없다. 

 

즉, block 안에는 inline이 들어올 수 있지만 inline 안에는 block이 들어올 수 없다. 

그 외에도 몇가지 다른 점이 있는데, 정리하자면 

 

block 

▶ 줄 바꿈이 일어난다. 
    항상 새로운 라인에서 시작한다. 

▶ 부모의 전체 너비 ( width )를 차지한다. 

▶ width와 height 설정이 가능하다. 

▶ 상하 마진( margin-top, margin-bottom )을 가질 수 있다. 

▶ inline과 block을 자식 요소로 가지고 있을 수 있다. 

▶ div, p, h1 ~ h6, ul, ol 이 대표적인 block 속성을 가지고 있는 태그이다. 

 

inline 

▶ 줄 바꿈이 일어나지 않는다. 

    새로운 라인에서 시작하지 않으며, 어디서나 시작할 수 있다. 

▶ 컨텐츠의 너비만큼 차지한다. 

▶ width와 height을 설정할 수 없다. 

▶ 상하 마진을 가질 수 없다. 

▶ block을 자식 요소로 가지고 있을 수 없다. 

▶ span, a, small, big, strong이 대표적인 inline 속성을 가지고 있는 태그이다. 

 

inline-block 

inline과 block을 짬뽕시킨 것 같은 이름을 가진 속성 inline-block이 있다.

이것은 실제로 둘의 특징을 가지고 있는데, 

 

inline

▶ 줄 바꿈 없이 한 줄에 다른 요소들과 배치가 가능하다. 

 

block 

▶ width, height, margin-top, margin-bottom 설정이 가능하다. 

 

다음과 같은 특징을 가지고 있다.