[HTML] display 속성 : inline과 inline-block 그리고 block의 차이점.

일단, 인라인 element과 블록 element가 존재한다.

 

블록 엘리먼트는 컨텐츠의 너비와 무관하게 전체를 차지하기 때문에, 수평으로 다른 엘리먼트를 같이 사용할 수 없다.

  

1. display:block;

위와 같이 div 3개를 만들고, display를 block으로 한다면, width가 150px임에도 불구하고 모두 세로로 정렬된다.

 

블록은 페이지 전체 너비를 혼자 사용한다고 볼 수 있다.

 

 

2. display: inline-block;

이 경우, 블록은 유지되지만, 인라인 형태로 보여지게 된다.

즉, 너비를 해당 엘리먼트의 너비만큼만 사용하고 나머지 공간을 다른 엘리먼트들과 나눠쓰게 된다.

따라서, 다음과 같은 모습이 나온다.

 

3. display: inline;

 

이렇게하면, 블록 속성이 전부 무효화된다. 즉, 내부 요소 텍스트만큼만 차지하게 된다.

블록에서 width와 height를 선언했지만, 이것들은 모두 무시된다.

따라서, 다음과 같은 모습이 나온다.

 그리고, 아래와 같이 divbox 속성에 경고가 표시된다.

내용은 위 설명한 것과 같다.

display를 inline으로 하면서, 블록이 아닌게 되어버렸기 때문이다.