[css] block, inline, inline-block

block

block은 레이아웃을 잡는데 기본이 되는 요소이다. div를 필두로, h1 ~ h6, form, header, aside, article, address, table, 등등이 block이 기본인 요소들이다.

• Block의 특징

block의 특징은 width, height, margin, padding 설정이 가능 하다는 것이다. 또한 block 내부에 다른 block이나 inline등을 배치하고 레이아웃을 지정해주는 역할 또한 가능하다.

inline

inline은 block과 반대되는 개념이다, span, a, img, input, label, button 등이 inline이 기본인 요소이다.

• inline의 특징
  inline은 width, height 지정이 불가하며, 컨텐츠의 영역이 크기로 자동적으로 지정이 된다. 또한 margin, padding이 block과는 다르게 적용된다. margin의 경우 위아래가 적용이 되지 않는다. padding의 경우 좌우는 적용되지만, 위아래는 시각적으로만 적용되고 실제 공간을 차지 하진 않는다.