[CSS] Box Type

Box

display: box type을 결정짓는 css속성

① display: block;

• 쉽게 생각하면 다른 요소들을 옆에 못오도록 막는다고(영역) 생각!

 <div class="content_parent">
    <div class="content1">
      content1
    </div>
    <div class="content2">
      content2
    </div>
 </div>

* {
      box-sizing: border-box;
      margin: 0;
    }
.content_parent {
      background-color:bisque;
    }
.content1, .content2 {
      height: 50px;
      line-height: 50px;
      color: #fff;
      text-indent: 20px;
    }
.content1 {
      width: 500px;
      background-color: blue;
    }
.content2 {
      width: 100px;
      background-color: red;
    }

• 따로 width의 값을 선언하지 않은 경우, width는 부모의content-box의 100% 값이 된다.
• 따로 width의 값을 선언한 경우, 남은 공간은 margin으로 자동으로 채워진다.
  
• 따로 부모의 height를 선언하지 않을 경우,
  자식 요소의 height의 합 = 부모의 height
  
  👩‍💻 참고) margin: 0 auto; : block일 경우 가운데정렬을 할 때 사용

② display: inline;

• 쉽게 생각하면 옆에 요소들이 계속 오는 흐름(선) 이라고 생각!
• width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom이 ❌사용불가❌
• 대표적인 inline요소로는 <span>이 있다.

③ display: inline-block;

• 쉽게 생각하면 block + inline
• 하지만 inline에서 쓰지못했던 width, height, margin, padding속성의 상하 간격 지정이 가능해진다.
• 대표적인 inline-block요소로는 <button>, <input>, <select>태그 등이 있다.

④ display: flex;