블록(Block) 요소와 인라인(inline)요소

css에서 가장 중요한것은 블록요소와 인라인 요소의 차이점이라고 아는 것이라고 생각한다.
이 개념이 흔들린다면 css를 사용함에 있어 혼란이 올 수 있으니 꼭 정립하고 가자.

1. 블록 요소

• div, h1, p 등
• 기본적으로 사용가능한 최대 가로 너비를 사용한다
• 크기를 지정 할 수 있다
• width: 100%; height: 0;으로 시작
• 수직으로 쌓임
• margin, padding 위 아래 좌 우 사용 가능
• 주로 레이아웃을 잡을 때 사용

2. 인라인 요소

• span, img, a 등
• 자신의 안에 포함된 내용 만큼의 너비를 사용한다
• 크기를 지정 할 수 없다
• width: 0; height: 0;으로 시작
• 수평으로 쌓임
• html 상에서 span태그 뒤에 줄바꿈이 있으면 띄어 쓰기가 들어간다
• margin, padding 위 아래 사용 불가 (padding의 경우 backgound는 들어가지만 영역을 잡지는 못함)
• 주로 텍스트를 다룰 때 사용

3. display 속성

• 요소의 속성을 inline, block, inline-block으로 변경 할 수 있다.
• inline-block은 inline과 block의 속성을 모두 가짐