Inline, Inline-block, Block

Jiwon Lee·2022년 2월 1일
0

TIL

목록 보기
1/19

CSS의 속성 중엔 display라는 속성이 있는데, 이는 요소를 어떻게 나타낼 지를 결정하는 역할을 한다.
오늘은 display의 속성에서 주로 사용되는 inline,inline-block,bolck에 대해서 알아보도록 하자.

Inline

span b i a 이와 같은 태그들이 inline 요소에 속한다.

  • inline은 기본 width값이 컨텐츠의 영역 만큼으로 지정이 되며, 줄바꿈이 이루어지지 않아, 한 라인에 inline엘리먼트가 여러 개 들어갈 수 있다. 텍스트와 같은 내용에 해당하는 부분을 감싸므로, height와 width에 영향을 주진 못한다.

Inline-block

  • inline-block은 inline과 block의 기능을 반반 담고 있다. inline처럼 한 줄에 배치가 되지만, block의 기능 처럼 height와 width에 영향을 줄 수 있으며, margin과 padding 속성의 좌우 간격 지정도 가능하다.

block

div p h li 이와 같은 태그들이 block 요소에 속한다.

  • block은 라인 하나를 통으로 담당하기 때문에, 한 라인에 bolck 엘리먼트는 하나만 들어갈 수 있다. 때문에 width값은 기본으로 100%로 지정되어 있으나, width를 포함한 height속성을 새로 지정할 수 있다.

0개의 댓글