Inline

Inline에 대해 배워보자.

Inline박스의 핵심적인 성격은 ‘흐름’이다.

Untitled

블록과 다르게 인라인은 자신의 옆에 새로운 요소를 배치할 수 있다. 블록과 정반대의 행동패턴을 가진다.

Untitled

인라인은 이렇게 새로운 인라인이 추가되었을때, 부모의 width를 초과하면 자연스럽게 아랫줄로 넘긴다. 문서작업시 줄바꿈하는것과 동일함.

Untitled

블록과 인라인을 서로 비교해보면 블록은 기본적으로 **‘면’**으로 생각, 인라인은 **‘선’**으로 생각

블록은 면이기 때문에 영역을 잡기 위해 사용. 그래서 width,height… 등등 다 사용가능

그런데 인라인은 컨텐츠를 옆으로 흐르게 하는 선이라고 생각.

Untitled

그래서 이런 흐름을깨트리는 요소가 추가되는걸 방지함.

따라서 박스모델의 프로퍼티중에 width, height, -top, -bootom… 등 사용 불가임.

Untitled

더미 텍스트갖고 인라인 박스를 설명하겠다.

모든 Html엘리먼트들은 박스인데, 대부분 블록타입을 갖는다고 했다. 하지만 그 중에서도 <span>, <a>, <strong>은 기본 디스플레이값이 inline이다.