[FE Study] block & inline & inline-block

leewol·2022년 6월 2일
1

CSS

목록 보기
1/1

📦 block & inline & inline-block

CSS의 box model은 각각

  1. block / inline
  2. inner display type / outer display type

으로 나뉨


blockinlineinline-block
줄바꿈OXX
width, heightOXO
수직 padding/margin/borderOXO
수평 padding/margin/borderOOO
예시<header>,<footer>, <p>, <li>, <table>, <div>, <h1><span>, <a>, <img>, <i><button>, <input>, <select>, <textarea>

block

  • 모양새를 쉽게 제어할 수 있어 화면 구성/레이아웃에 사용
  • 상자가 한 줄 차지
  • 상자는 컨테이너에서 사용 가능한 공간을 채우기 위해 인라인 방향으로 확장, 기본적으로 width 100%를 채움
  • width, height 속성 적용
  • padding, margin, border로 인해 다른 요소가 상자로부터 밀려남

inline

  • inline 속성 가진 태그가 연속으로 사용되는 경우, 좌우에 약 5px 가량 margin이 자동으로 발생
  • 줄바꿈 되지 않음
  • width, height 속성이 적용 X
    • 태그가 품고 있는 내부 요소의 부피에 맞춰짐
  • 수직(top / bottom) padding, margin, border가 적용되지만 다른 인라인 상자가 해당 상자로부터 밀려나는 원인이 되지는 않음 (적용되지 않는 것처럼 보임)
    • line-height가 같은 역할을 함
  • 수평(left / right) padding, margin, border가 적용되고, 다른 인라인 상자가 해당 상자로부터 밀려남

참고

blogs
CSS inline, inline-block, block 란?
block vs inline vs inline-block

MDN
The box model

profile
want to be 개자이너

0개의 댓글