box-sizing

HTML, CSS

      /* style */
        /* 外枠のブロック */
        .content-box,
        .border-box{
            width: 100%;
        }
        /* 中のブロック */
        .content-box div,
        .border-box div{
            width: 50%;
            height: 200px;
            padding: 40px;
            float: left;
        }
        .content-box div {
          box-sizing: content-box;
        }
        .border-box div {
          box-sizing: border-box;
        }
    

content-box

border, padding は width, height に含まれない。

border-box

border, padding も width, height に含まれる。