display : block / inline / inline-block

liim·2023년 2월 27일
0

block

  • 한 줄을 혼자 다 차지하는 특성이 있음 (다른 엘리먼트를 다음 줄로 밀어버림)
    ㄴ 내용의 크기와 상관 없이 너비 100% 차지, 높이는 내용의 크기만큼 차지함
  • width, height 크기 지정 가능
  • padding, margin 을 통한 상하좌우 여백 생성 가능
  • block 태그:
    div, p, h1~h6, ol, ul, dl, form, br, hr, adress, video,
    blockquote, table, thead, tbody, tfoot, tr, th, td ...

inline

  • 줄바꿈 없이 쭉 배치되며, 내용의 크기만큼 영역이 설정됨
  • 크기, 여백 설정 불가
  • inline 안에 block 요소를 사용할 수 없음
  • inline 태그:
    a, span, img, strong, b, i, em, input, button ...

inline-block

  • block 속성과 inline 속성을 섞어 가짐
  • 크기, 여백 설정 가능
  • 여러 엘리먼트를 한 줄에 배치 가능
profile
Web Publisher

0개의 댓글