블록 요소는 여러개가 쌓일 때 수직으로 쌓이는 display 유형이다.
- width, height를 지정할 수 있다.
(해당 공간에 들어있는 컨텐츠 크기보다 더 넓은 크기를 지정할 수 있으며 기본적으로 height는 가진 컨텐츠만큼 지정되며 width는 최대로 지정)- margin, padding을 top, bottom, left, right 전부 지정할 수 있다.
- block요소에도
display: block;
css구문으로 block효과를 줄 수 있다.
더 많은 요소들은 mdn 블록요소 에서 참조 !!
인라인 요소는 여러개가 쌓일 때 수평으로 쌓이는 display 유형이다.
- width, height를 지정할 수 없다.
(해당 공간에 들어있는 컨텐츠 크기만큼 크기를 지님)- margin, padding을 left, right에만 지정할 수 있다.
- block요소에도
display: inline;
css구문으로 inline효과를 줄 수 있다.
더 많은 요소들은 mdn 인라인요소 에서 참조 !!
인라인블록 요소는 인라인 요소와 블록 요소를 혼합한 display 유형이다.
인라인 요소처럼 여러개가 쌓일 때 수평으로 쌓인다.
- 인라인 요소처럼 너비와 높이가 내부 컨텐츠 크기만큼 설정 된다.
- 블록 요소처럼 width와 height로 너비와 높이를 설정할 수 있다.
- 블록 요소처럼 padding과 margin으로 상하좌우 여백을 지정할 수 있다.
해당 유형을 가진 태그는 없으며 display: inline-block
css 구문으로 효과를 줄 수 있다.