[CSS]block과 inline의 차이점

display

블록(block)

<div>, <h1>, <p>, <ul>, <ol>, <form>

 

인라인(inline)

<span>, <a>, <img>

 

 

블록은 범위 단위로 배치되는 것이고,

인라인은 Text자처럼 안쪽에 삽입 된 것처럼 배치.

 

인라인은 Text의 양만큼 자동으로 너비설정 됨. 높이도 Text의 높이만큼 설정.

박스 블록 css 처럼 width나 height 설정이 불가능함.

 

 

inline-block

display 속성이 inline-block이면.

기본적으로 inline 속성에, block 속성 처럼 width와 height 지정 및 margin과 padding 속성의 상하 간격 지정이 가능.

내부적으로 block 규칙을 따르지만, 외부적으로 inline 규칙을 따름

 

<button>, <input>, <select> 태그등이 있음.

 

 

 

display:none; ==> 존재하지만 사용자에게 안 보이게 함