inline, block, inline-block

kingth·2020년 11월 17일
0

HTML/CSS

목록 보기
3/4
post-thumbnail

HTML요소는 "인라인" 요소와 "블록 레벨" 요소로 구분된다.

Inline Elements

컨텐츠의 크기만큼만 공간을 차지하고 줄바꿈을 하지 않는다.

가로세로의 크기를 임의로 지정할수 없고, 그 크기는 오로지 컨텐츠에 의해서 결정된다.

대표적인 inline요소로는 <span>이 있다.

Block level Elements

다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 부모 요소의 100%를 차지한다.

가로세로 크기를 지정할수 있고, 가로 크기를 부모 요소의 크기보다 작게 설정할 경우, 그 나머지 부분을 margin으로 채워져 해당 요소의 크기는 그대로 한줄을 차지한다.

대표적인 block요소는 <div>, <p>등이 있다.

Inline-block

block과 inline의 속성을 섞어놓은 것이다.

  • block처럼 가로세로 크기를 설정할 수 있다.
  • 줄바꿈을 하지 않는다.
  • 크기를 지정하지 않으면 inline과 같이 컨텐츠만큼 크기를 차지한다.
profile
Dreams come true.

0개의 댓글