[html/css] 디스플레이 블록(block)과 인라인(inline) 속성 과 인라인블록 및 플로트에 대하여

 

 

display 값이 block 인 것

• <h1>, <2>,..., <h6>
• <p>
• <div>

위에서 아래로 차례대로 배치되는 요소이며, 크기를 지정할 수 있다.

 

 

display 값이 inline인 것

 

• <a>
• <br>
• <img>
• <span>

글을 쓰는 방향으로 줄이 바뀌면서 배치된다. 블록과 달리 크기를 지정할 수 없다.  (이미지는 예외)

 

 inline-block

inline처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 속성

display: inline-block;

 

 

Float 속성

플로트 속성은 요소를 페이지 왼쪽이나 우측에 배치하고 그 주변으로 인라인 요소들을 배치할 수 있게 한다.

float: right;

 

블록, 인라인블록, 인라인 비교