블록요소 / 인라인 요소 특징

블록 요소	인라인 요소
예) div, h1, p 태그	예) span, img 태그
사용 가능한 최대 가로 너비를 사용한다.	필요한 만큼의 너비를 사용한다.
크기를 지정할 수 있다.	크기를 지정할 수 없다.
기본 auto 값 - width: 100% - height: 0	기본 auto 값 - width: 0 - height: 0
수직으로 쌓임	수평으로 쌓임
margin, padding 위, 아래, 좌, 우 사용 가능하다.	margin, padding 위, 아래는 사용할 수 없다. (좌우 사용가능)
레이아웃을 잡는 용도	TEXT를 작업하는 용도

*padding은 여백을 만들어 시각적인 거리를 만들어낼 수는 있지만, 실질적인 요소와의 거리, 공간을 만들어내지는 못한다.

 

• 인라인의 수평구조: 한줄로 작성할 경우 붙어서 나오며, 줄바꿈을 해서 작성하면 자동적으로 요소끼리 띄어서 나타난다.

<span>안녕하세요!</span><span>안녕하세요!</span><span>안녕하세요!</span>
<span>안녕하세요!</span>
<span>안녕하세요!</span>

• 인라인의 너비: 인라인 요소는 필요한 만큼의 크기를 가지기 때문에 가로/세로의 크기를 지정해줘도 크기가 늘어나거나 줄어들지 않는다. 하지만 여기에 display: block 처리를 해주면 블록 요소와 같이 크기를 지정할 수 있게 된다.