block-level과 inline-level
CSS에는 block-level과 inline-level의 구분이 있다. display 값은 모두 이 두 가지 범주 중 하나에 속한다. box가 이 두 가지 범용적 역할 중 어디에 속하는지가 매우 중요하다. 프로퍼티 일부는 두 가지 역할 중 하나에만 적용되기 때문이다.
block level
“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).”
블록 레벨 박스는 요소 박스가 기본으로 부모 요소의 콘텐츠 영역 너비를 채우며, 그 좌우에 다른 요소가 놓일 수 없다. 그래서 블록 요소가 있을 경우 줄바꿈 현상이 나타난다. 대표적인 블록 요소로는 div가 있다.
블록 박스를 만드는 display 값은?
block, list-item, table, table-row-group, table-header-group, table-footer-group, table-column-group, table-row, table-column, table-cell, table-caption, flex, grid
inline level
“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.”
인라인 레벨 박스는 요소 박스가 텍스트 행 안에 생성되며, 그 행의 흐름을 방해하지 않는다. 즉 줄바꿈을 만들지 않으므로 다른 요소의 디스플레이를 방해하지 않고 그 콘텐츠 안에 존재할 수 있다. 대표적인 인라인 요소는 span이 있다.
인라인 박스를 만드는 display 값은?
inline, inline-block, inline-table, ruby
HTML과 CSS의 블록 레벨, 인라인 레벨의 차이?
거의 비슷하긴 하지만, HTML에서 블록 레벨 요소는 인라인 레벨 요소 안에 들어갈 수 없지만, CSS에서는 디스플레이 역할과 무관하게 블록 레벨이 인라인 레벨 안에 들어갈 수 있다.
Last updated
