inline, inline-block, block 에 대해서

이현범·2022년 5월 24일
0

1. inline

  • inline 으로 지정된 엘리먼트는 줄바꿈 없이 한줄에 다른 엘리먼트들과 나란히 배치 됩니다.
  • 내용물의 크기가 태그의 영역이 됩니다.
  • 대표적인 inline 태그 : <span> <a> <img>

👆 <inline> 엘리먼트를 사용 할 때 주의점은, 내용물의 크기가 태그의 영역이 되므로 width와 height 속성을 지정해도 무시 된다.
👆 margin과 padding 속성도 좌우 간격만 반영이 된다.

2. block

  • block으로 지정된 엘리먼트는 앞 뒤 태그의 내용을 줄바꿈이 들어가 한 줄을 자신이 차지 합니다.
  • 대표적인 block 태그 : <div> <form> <header>

👆 block 엘리먼트는 width, height, margin, padding 속성이 모두 반영이 된다.

2. inline-block

  • <inline> 엘리먼트 처럼 한 줄에 나란히 배치가 됩니다.
  • 하지만 width와 height / margin과 padding 속성 지정이 가능합니다.
  • 대표적인 inline-block 태그 : <button> <input> <select>

👆 <inline-block> 엘리먼트는 아래와 같이

span { display: inline-block;}

display: inline-block 속성을 적용 시켜줘야 한다.

👆 <inline-block> 을 활용하면 원하는 크기만큼 여러개의 엘리먼트 들을 배치 시킬 수 있기 때문에 레이아웃에 활용 할 수 있다.

profile
프론트엔드 개발자 이현범 입니다.

0개의 댓글

관련 채용 정보