CSS-inline/inline-block/block

inline

자기(content)의 크기 만큼을 차지한다. background로 이미지를 준다면 나타나지 않거나, text 길이정도의 크기만 표시된다. 이럴 경우 tag를 바꿔주든 css에서 display:inline-block; 으로 설정을 해준다면 본인 tag그대로 사용할 수 있다.

element가 inline인 <span> <a>  <button> <img> tag등이 있다. <span>,<a>를 사용하면 한줄에 나타난다(줄바꿈이 일어나지 않는다).

inline element는 height,width가 임의로 적용되지 않는 특성이 있습니다. margin,padding은 좌우간격만 반영이 되며 상하간격는 적용되지 않는다.

 

inline-block

두가지 성질이 같이 나타나는데 기본적으로 inline처럼 한줄에 배치된다. block과 같이 height,width,padding, margin가 적용되는 것을 볼수 있다.

 

block

부모의 크기만큼 가로 전체를 차지함(부모가 없으면 브라우저 가로 전체를 차지)

block element를 가진 tag는 <div> <p> <h1>등이 있다.

inline과 달리 전후 줄바꿈이 된다. 또한 height, width, margin, padding 속성이 잘 반영된다. inline과 다르게 좌우측에 다른 요소 붙여 넣을 수 없다. 

 

CSS (inline->block / block->inline)

span{ display:block;}  -->block 속성을 가지게 됨

div{ display:inline;}     -->inline 속성을 가지게됨

span{ display:inline-block;} -->inline-block 속성을 가지게 됨

 

 

https://www.daleseo.com/css-display-inline-block/

CSS의 display 속성: inline, block, inline-block

https://velog.io/@rimu/html-%EC%9D%B8%EB%9D%BC%EC%9D%B8%EC%9A%94%EC%86%8Cinline-element-vs-%EB%B8%94%EB%9F%AD%EC%9A%94%EC%86%8Cblock-level-element

[html] 인라인요소(inline-element) vs 블럭요소(block level element )