CSS <display-outside>: 외부 레이아웃 유형
<display-outside> 키워드는 요소의 외부 레이아웃 유형을 설정합니다. 외부 레이아웃 유형은 플로 레이아웃에 참여하는 방식을 결정합니다. <display-outside>는 display 속성의 값으로 사용하며, 레거시 구문에 따라 단일 키워드로 사용하거나, Level 3 명세에 따라 <display-inside> 키워드와 함께 사용할 수 있습니다.
구문
block요소가 블록 요소 박스를 생성합니다. 일반 문서 흐름 내에 위치할 경우 앞뒤로 개행됩니다.
inline요소가 인라인 요소 박스를 한 개 이상 생성합니다. 인라인 요소 박스만으로는 개행이 발생하지 않습니다. 일반 문서 흐름 내에 위치하고 충분한 공간이 확보되면 다음 요소는 인라인 요소와 같은 줄에 배치됩니다.
브라우저가 외부 레이아웃 유형 키워드 하나만 지정된 display 속성(e.g., display: block, display: inline)을 마주하면 내부 레이아웃 유형은 flow로 처리합니다(e.g., display: block flow, display: inline flow). 이는 단일 키워드만 사용 가능한 구 명세와 호환되는 동작입니다.
명세
브라우저 호환성
| 데스크톱 | 모바일 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| iOS | Android | ||||||||
| Safari | Chrome | Firefox | Safari | Safari WebView | Chrome | Android WebView | Firefox | Samsung Internet | |
block | |||||||||
| 데스크톱 | 모바일 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| iOS | Android | ||||||||
| Safari | Chrome | Firefox | Safari | Safari WebView | Chrome | Android WebView | Firefox | Samsung Internet | |
inline | |||||||||