inline, block, inline-block 차이

See the Pen inline. block, inline-block by nilgi (@nilgi) on CodePen.

 

span에 width, height 값이 있지만 inline에서 반영되지 않는다.

block, inline-block에서는 width, height 값이 적용 된다.

 

참고로 두번째 block를 잘 보면 margin값이 다른 두 box에 비해 좁은데 이는 margin의 세로 값은 교집합마냥 겹치기 때문이다.