CSS display

display 속성은 요소들에 박스 형태의 유형을 설정 합니다.

span 태그는 인라인 속성을 가지고 있는데 그걸 블록으로 바꿔주고 p 태그 처럼  줄 바꿈을 하는 태그를 인라인 속성을 부여하여 줄 바꿈을 하지 않고 붙여주는 기능을 합니다.

display:inline
display:block
display:inline-block
display:none

주로 사용하는 속성들 입니다. display:none 속성은 화면에서 노출에서 제외 시켜버립니다.

기본값:inline, 상속:안됨, 버전:CSS1

span span span span span span span span span span span span span span span

span 태그들은 인라인 속성을 가지고 있기 때문에 오른쪽에 자연스럽게 배치 됩니다. 높이가 없기 때문에 요소가  겹치기 때문에 margin을 주던지 block화 해야 합니다.

span span { display:block; } span

display:block 화를 하면 이렇듯 inline 속성을 읽어버리게 되어 버립니다.

span span span span span span span span span span span span span span span

display:inline-block 이렇게 inline 속성과 block 속성을 다 가지게 됩니다.

div

div

div

div { display:inline }

div { display:inline }

div { display:inline }

display:inline