display: inline
-> 물건이라고 생각하면 쉽습니다. width,height 무시하고 inline에 지정한 글씨크기만큼 적용됩니다.
display : inline-block
-> 1줄에 여러개 진열된 상자인데 컨텐츠 사이즈 상관없이 우리가 지정한 박스 width,height 에 맞춰서 표기됩니다.
display : block
-> 상자라고 보면 되며, 한줄에 하나씩 보여집니다.
---- 여기에서 물건은 <div>1</div> 에 있는 1과 같은 컨텐츠를 말하며 상자는
div, span {
width: 80px;
height : 30px;
}
이와 같이 적용된 너비의 크기로 만들어진것을 말합니다. ---
또한
display: none;
화면에서 사라집니다. 크기 자체도 차지하지 않습니다.
display: block;
쉽게 말하자면, 가로 한 줄을 다 차지하게 됩니다.
display: inline;
컨텐츠를 딱 감쌀정도의 크기만 갖게됩니다.
display: inline-block;
inline과 block의 특성을 합쳐놓은 속성입니다.참고로 Explorer 7 이하에서는 사용할 수 없습니다.
참고> 드림코딩 display 영상, 블로그