none
화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 합니다. 즉, 아무것도 없는 것 처럼 감추거나, 가릴때 사용하게 됩니다.
inline
span은 표준 인라인 엘리먼트입니다. span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.
- width/height 적용 불가
- margin/padding-top/bottom 적용 불가
- line-height 원하는 대로 적용 불가
inline-block
인라인 블락은 inline과 block을 섞어 놓은겁니다. 기본적인 성질 자체는 inline과 비슷하나 동일한 라인에 여러 태그를 붙일 때 사용할 수 있습니다. inline의 단점을 보완한 것이 inline-block입니다.
- width/height 적용 가능
- margin/padding-top/bottom 적용 가능
- line-height 적용 가능
block
div는 표준 블록 엘리먼트입니다. 블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어납니다. 자주 볼 수 있는 다른 블록 레벨 엘리먼트로 p와 form이 있으며, HTML5에서 새로 추가된 엘리먼트로 header와 footer, section이 있습니다. 즉, block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다
Allday