0303-box-sizing실습

//

아카데미 / css / day04 / 1_css배경.html

테스트로 해볼것.

 

 #circle {
        width: 48px;
        /* px단위는 4px 단위로 올려주는게 빠르다. */
        height: 48px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 4px;

        background-color: aquamarine;

        /* ---내가 테스트--- */
        padding: 20px; /*=>이걸주면 border까지 총 92px가 된다 하지만 box-sizing:border-box를 체크하면 padding과 border까지 합한 48px가 된다.*/
        border: 2px solid red;
        /*
        48 + 40(padding) + 4 (border) =>92px 하지만 box-sizing:border-box를 하면 48px가 된다.
        */
      }