[CSS] display : block, inline, inline-block

SuJeong·2022년 10월 18일
0

CSS

목록 보기
2/2
post-thumbnail

1. block

블록 요소는 여러개가 쌓일 때 수직으로 쌓이는 display 유형이다.

  • width, height를 지정할 수 있다.
    (해당 공간에 들어있는 컨텐츠 크기보다 더 넓은 크기를 지정할 수 있으며 기본적으로 height는 가진 컨텐츠만큼 지정되며 width는 최대로 지정)
  • margin, padding을 top, bottom, left, right 전부 지정할 수 있다.
  • block요소에도 display: block; css구문으로 block효과를 줄 수 있다.

더 많은 요소들은 mdn 블록요소 에서 참조 !!

2. inline

인라인 요소는 여러개가 쌓일 때 수평으로 쌓이는 display 유형이다.

  • width, height를 지정할 수 없다.
    (해당 공간에 들어있는 컨텐츠 크기만큼 크기를 지님)
  • margin, padding을 left, right에만 지정할 수 있다.
  • block요소에도 display: inline; css구문으로 inline효과를 줄 수 있다.

더 많은 요소들은 mdn 인라인요소 에서 참조 !!

3. inline-block

인라인블록 요소는 인라인 요소와 블록 요소를 혼합한 display 유형이다.
인라인 요소처럼 여러개가 쌓일 때 수평으로 쌓인다.

  • 인라인 요소처럼 너비와 높이가 내부 컨텐츠 크기만큼 설정 된다.
  • 블록 요소처럼 width와 height로 너비와 높이를 설정할 수 있다.
  • 블록 요소처럼 padding과 margin으로 상하좌우 여백을 지정할 수 있다.

해당 유형을 가진 태그는 없으며 display: inline-block css 구문으로 효과를 줄 수 있다.

profile
Front-End Developer

0개의 댓글