display property
display property의 소속되는 inline, block vs inline-block
inline
Display 속성이 inline으로 지정되어 있으면 줄바꿈 없이 한 줄에 다른 엘리먼트들과 난란히 배치가 된다. 그리고 inline element는 컨텐츠 만큼 width가 지정된다.
inline 요소
a, i, span, img, strong, b, input, em, small, tt, map, textarea, label, button
block
display 속성이 block으로 지정된 경우 element의 width는 줄바꿈이 들어간다. 다른 element와 함께 난란히 배치가 안되고 한줄씩 차지한다. block의 대표적인 tags는 div , p, h1가 된다.
block 요소
address, article, aside, blockquote, canvas, dd, div, dl, hr, header, form, h1, h2, h3, h4, h5, h6, h7, table, ul, p, ol, video
block
inline-block은 적혀있는데로 inline과 block의 두 가지 특징을 가지고 있다.
- 줄바꿈이 이루어지지 않는다.
- block처럼 width와 height를 지정 할 수 있다.
- width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.
display: inline-block
