Display(Block, Inline, Inline-block)

jhwang·2022년 4월 26일
0

WeCode(TIL)

목록 보기
3/4

🗒 Display 속성

요소를 어떻게 보여줄지를 결정

block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태


📌 Block

기본적으로 가로 영역을 모두 채움
block 요소 다음 태그는 다음 줄로 변경됨
ex) header, footer, p, li, table, div, h1 ...

  • block 특징을 가진 태그들은 width, height, margin, padding 줄 수 있음

📌 Inline

block과 달리 줄 바꿈이 되지 않음
inline 특징을 가진 태그들끼리는 같은 라인에 다음 요소를 연이어 위치 가능
ex) span, a, strong, img, br, input, select, textarea , button ...

  • content 너비만큼 가로폭을 가지고 width, height 속성 설정이 불가능
  • margin, padding은 좌우값만 적용시킬 수 있음

📌 Inline-block

block과 inline의 중간 형태
줄 바꿈이 되지 않지만 크기 지정 가능

  • inline-block은 가로로 요소를 배치하며 나열하는 inline 요소의 특성width, height, margin, padding 등의 속성 설정이 가능한 block 요소의 특성을 모두 갖음

profile
"Your goals, Minus your doubts, Equal your reality"

0개의 댓글