[HTML] block, inline, inline-block 요소

display는 어떻게 보여질지 정해주는 속성입니다.

각 태그별로 고유의 요소가 지정되어 있습니다. css로 제어할수 있습니다.

 

특징

block : 새로운 라인에 생성되며 width값 100%를 가집니다.

• css로 width값을 지정해도 라인은 변하지 않습니다.
• width, height 지정 가능합니다.
• margin값과 padding값을 가질 수 있으며 margin:auto를 통해 정렬를 할 수 있습니다.
• 태그 : div dl dd hr aside h ul ol p video article canvas form ...

 

inline : 안에 들어간 요소만큼의 넓이를 가집니다.

• width, height값 지정 불가능합니다.
• margin 좌우값과 padding값을 가지지 못합니다.
• 태그 : a i span strong b sub sup ...

 

block과 inline

 

inline-block : block과 inline 요소 특징이 섞여있습니다.

• block요소처럼 width,height,padding,margin값을 지정할 수 있습니다. (margin:auto;는 불가능합니다.)
• inline요소처럼 줄바꿈이 되지 않고 요소만큼의 넓이를 가집니다.
• CSS display요소로 지정이 가능합니다.

 

 

일반적으로 꾸미기 어려운 inline보다 block과 inline-block가 많이 사용됩니다.