1. block
1) 특징
줄 전체를 하나의 공간(block)으로 이용한다. 따라서 뒤에 다른 요소가 따라오더라도 바로 옆이 아니라 다음줄에 생성된다.
2) 예시
<div>, <p>, <h1>
3) 속성
width, height, margin, padding 속성을 모두 적용 가능하다.
2. inline
1) 특징
block과 가장 큰 차이는 줄바꿈에서 나타난다. inline은 줄바꿈이 존재하지 않기 때문에 뒤에 따라오는 요소가 바로 옆에 붙어 생성된다.
2) 예시
<span>, <a>
3) 속성
태그 안에 들어있는 내용만큼만 공간이 형성되기 때문에 width, height 값을 주더라도 자동으로 무시된다. margin, padding은 오로지 좌우값만 반영되고 상하값은 무시된다.
3. inline-block
1) 특징
이름 그대로 inline과 block을 혼합시켰다고 보면 된다. inline처럼 줄바꿈은 없으나 요소가 자신의 공간(block)을 갖고 있다.
2) 예시
<button>, <input>, <select>
3) 속성
공간(block)이 존재하기 때문에 block과 동일하게 width, height, margin, padding 모두 사용 가능하다.
4. none
1) 특징
공간을 할당하지 않는다. 할당하지 않음으로써 화면에서 해당 요소를 완전히 지워버리고 보이지 않게 해준다. 이를 이용해 요소를 보였다(block) 안보였다(none) 하는 효과를 줄 수 있다.
2) 주의할 점
앞에서 언급했듯이 '공간을 할당하지 않는다'. 이는 뒤따라오는 요소가 있을 경우 해당 공간을 빈 공간으로 취급하여 뒤따라 오는 요소들이 그 자리를 대신 채운다. 만약 이 공간을 그대로 두고싶다면 'display: none;' 대신 'visibility: hidden;'을 사용하는 것이 낫다.
