[HTML/CSS] display

display : 인라인요소를 블럭요소로, 또는 블럭요소를 인라인요소로 변경하기 

block :
한 영역을 차지하는 박스형태를 가지는 성질 
block은 width와 height를 지정할 수 있다. 
margin과 padding을 지정할 수 있다. 

inline : 
주로 텍스트를 주입할 때 사용되는 형태 
영역이 컨텐츠의 양만큼 자동으로 잡힌다.
width와 height를 명시할 수 없다. 
margin은 위아래엔 적용되지 않는다. 

inline-block : 
inline과 block의 특징을 모두 가진 요소 
줄바꿈이 이루어지지 않음 
block처럼 width와 height를 지정할 수 있다. 
만약 너비와 높이를 지정하지 않을 경우 컨텐츠만큼만 영역이 잡힌다.

 

 

<img>, <span>, <a>는 모두 인라인 요소로 줄바꿈 없이 옆으로 이어서 작성된다.

이때 display 태그를 이용하면 이들은 블럭요소처럼 줄바꿈을 수행한다.

 

 

헤드 - 스타일 태그 안에서 display : block 으로 표현 가능