block element , display: block는 width, height, margin, padding 속성이 모두 반영 그리고 기본적으로 줄바꿈을 한상태로 레이아웃이 나타난다. 대표 태그로는 div가 있다.
inlenie element, display: inline는 width, height 값은 무시된다. 또한 margin의 속성 값은 좌우 간격만 반영이 되고 상하는 반영이 안된다. 그리고 기본적으로 줄바꿈이 없고 우측으로 바로 이어져 레이아웃이 나타난다. 대표 태그로는 span이 있다.
그럼 block의 특징도 가지고있으면서 줄바꿈이 없게끔 할려고 하면 어떻게 해야할까?
display: inline-block : display 속성이 inline-block으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작한다.기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin 속성의 상하 간격 지정이 가능합니다. 다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것이지요. 대표 태그로는 button,input, select이 있다. 하지만 inline-block은 컨트롤이 하기가 어려워서 잘 쓰지 않는다. 기본적으로 inline-block은 default 값으로 간격이 주어지는데 이 간격은 컨트롤 할 수가 없다. flex를 사용하는 것을 더 추천한다.
