HTML을 통해서 block요소와 inline 요소를 나눠 사용할 수 있다.

HTML의 거의 대부분 tag들은 block 요소이다. 항상 새 줄에서 시작하며 옆(좌우)에 다른 요소를 붙여넣을 수 없도록 자리를 차지한다.

inline 요소는 <span>, <a>, <img> 등인데 옆에 다른 것이 위치할 수 있다. 딱 어떤 영역만큼만 자리를 차지한다.

하지만 CSS를 통해서 block, inline요소의 성질을 얼마든지 바꿀 수 있다.

1.inline

h1 {
	display: inline;
    width: 100px  > no effect
    height: 100px > no effect
}

block 요소인 h1에 display: inline을 하면 옆에 다른 요소가 올 수 있게 된다.

특히 inline은 콘텐츠 자체만을 꾸며준 것이기 때문에, 높이나 너비를 지정하려고 해도 어떤 효과도 없게된다. (한 줄에 여러개가 들어가는 물건)

2. inline-block

h2 {
	display: inline-block;
    width: 100px  > effect
    height: 100px > effect
}

inline과 거의 비슷하지만 단 한가지 차이가 있다. 상자로 변경되는 것이기 때문에 높이와 너비 값을 설정할 수 있다는 것이다. (한 줄에 여러개가 들어가는 상자)

3. block

 span {
 	display: block
 }

inline 태그인 span, a, img 등에 css로 block을 지정해주면 한 줄을 차지하게된다. (한 줄에 하나만 들어가는 상자)

참고 사이트: https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/