[css] inline / inline-block / block

bluepony·2022년 1월 26일
0

TIL

목록 보기
3/25
  • tag에 기본적으로 display 속성 값이 지정되어 있지만 css에서 display 값 '재설정' 가능
  • display속성 값 중 inline / inline-block / block 에 대한 설명입니다.

display: inline

  • 대표적인 inline tag : <span>, <a>
  • 줄바꿈 되지 않고, 동일한 라인에 여러개 작성 가능
  • 'width', 'height' 속성값 지정 불가
  • 내용만큼의 공간을 차지함

display: inline-block

  • inline의 '줄바꿈 되지 않고, 동일한 라인에 여러개 작성 가능'한 특징을 가짐
  • 'width', 'height' 속성 지정 가능
  • <button>, <input> 등의 태그가 기본적으로 inline-block의 속성값을 가짐

display: block

  • 대표적인 block tag : <div>, <h1>, <p>
  • 하나의 요소가 한 줄을 차지, 다음으로 오는 요소는 아랫줄에 배치됨
  • width가 부여되면 늘어나지 않게 됨
  • width를 부여하고 margin값을 auto로 설정하면 margin값을 균등하게 배분함

언젠가 필요해질 것 같은 정보

profile
모든 일이 쉽기 전에는 어렵다.

0개의 댓글