CSS 에서 inline 과 block , inline-block 차이

block

블록 서식 상황에서 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. 두 형제(동급) 상자 사이 수직 간격은 '여백' 속성에 의해 결정된다. 블록 서식 상황에 속하는 인접하는 블록 수준 상자 사이 수직 여백은 축소된다.
블록 서식 지정 상황에 속하는 각 상자의 왼쪽 바깥족 가장자리는 콘테이너 블록의 왼쪽 가장자리를 접한다. (오른쪽에서 왼쪽[아랍어] 방향 서식의 경우는 우측 가장자리를 접한다.)" - 9.4.1

 

“In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).” - 9.4.1

 

 

수직으로 하나씩 배치하는 형태

 

block은 한 영역을 차지 하는 박스형태, 기본적으로 block은 width값이 100%

 

 

inline

인라인 서식 상황에서 상자는 콘테이너 블록의 상단에서 하나씩 차례로 수평으로 배치된다. 이 상자들 사이 수평 여백, 테두리 및 패딩은 준수된다. 상자는 다양한 방법으로 수직으로 정렬될 수 있다. 상자의 하단이나 상단에 맞춰 정렬되거나 텍스트의 기준선에 맞춰 정렬될 수 있다. 라인 형태를 띠는 여러 상자를 가두는 직사각형 영역을 라인 상자라고 한다. "- 9.4.2

 

“In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.” - 9.4.2

 

수평으로 배치되는 형태 텍스트의 기준선,상자의 하단이나 상단에 맞춰 정렬될 수 있음

 

width/height 적용불가

margin/padding-top/bottom 적용불가

line-height 원하는대로 적용 불가 (제약이 있다고 함)

 

 

출처 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow

 

 

inline-block

인라인 블록의요소는 블록 요소 상자를 생성하며, 블록 요소 상자는 마치 하나의 인라인 상자처럼(대체된 요소처럼 동작함) 주변 콘텐츠와 함께 흐릅니다.

인라인 흐름 루트와 동일합니다.

 

inline-blockThe element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

It is equivalent toinline flow-root.

 

 

inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 display 형태 입니다

 

• inline 형태처럼 수평으로 배치된다 (줄바꿈이 일어나지 않음)
• inline과 달리 width와 height를 지정 할 수 있다.
• 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

최대 단점 :  반응형 디자인 (Responsive Design) 을 지원하지 않음 inline-block을 화면에 여러개 배치했을때 모니터 크기마다 다르게 나와서 추천하지 않음