CSS 크기 계산, box-sizing

김규리·2021년 5월 24일
0

front-end

목록 보기
10/16

텍스트# CSS 크기 계산, box-sizing

요소의 크기 계산 기준을 지정

기본값, content-box: 요소의 내용(content)으로 크기 계산

border-box: 요소의 내용 + padding + border로 크기 계산

<div class="item"></div>
<div class="item"></div>
  • border 와 padding으로 인해서 요소의 크기가 128 *128 로 커짐!

    .item {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
    .item:first-child {
      border: 4px solid red;
      padding: 10px;
      /*border 와 padding으로 인해서 요소의 크기가 128 *128 로 커짐!*/
    }
  • box-sizing을 사용하여 요소에 지정한 사이즈대로 출력 가능!

    .item {
        width: 100px;
        height: 100px;
        background-color: orange;
    }
    .item:first-child {
        border: 4px solid red;
        padding: 10px;
        box-sizing: border-box;
    }

0개의 댓글