[CSS] display - block, inline, inline-block

jiggyjiggy·2022년 3월 29일
0

display property의 값 중 block, inline 그리고 inline-block에 대해 알아보겠습니다.

tag마다 display property의 기본값이 다릅니다.

  • div 의 기본값은 block
  • span 의 기본값은 inline

display: block;

display: block; 이 부여되어있다면

  • 해당 요소의 좌 우측으로는 다른 요소를 넣을 수 없습니다.
  • block 요소들은 항상 새 줄에서 시작하며 좌우로 최대로 늘어납니다.
  • height와 width 지정 가능합니다.
  • margin과 padding 지정 가능합니다.

.block {
  display: block;
  width: 300px;
  height: 60px;
  margin: 20px 10px 50px 30px;
  padding: 40px 30px;
}

display: inline;

display: inline; 이 부여되어있다면

  • 해당 요소는 한 줄에 넣을 수 있습니다.
  • inline 요소들은 text영역 만큼만 차지합니다.
  • height와 width 지정 불가능합니다.
  • margin은 위아래는 지정 불가능합니다.
  • padding은 지정 가능합니다. (단, 실제적인 공간 차지는 좌우로만 적용됩니다.)
.inline {
  display: inline;
  width: 300px; /* 무시되는 값 */
  height: 60px;  /* 무시되는 값 */
  margin: 20px 10px 50px 30px;  /* 무시되는 값 */
  padding: 40px 30px;  /* 상하 padding은 실제적 공간차지를 못함 */
}

display:inline-block;

display: inline-block;은 inline과 block의 중간 성질을 띕니다.

  • 해당 요소는 한 줄에 넣을 수 있습니다. (inline)
  • width와 height를 지정할 수 있습니다. (block)
  • height와 width 지정 가능합니다. (block)
  • margin과 padding 지정 가능합니다. (block)
.inline-block {
  display: inline-block;
  width: 300px;
  height: 60px;
  margin: 20px 10px 50px 30px;
  padding: 40px 30px;
}
profile
궁금증 주도 공부 / 원리 파고들기 / 경험에 기반한 블로그

0개의 댓글