input 边框问题

Question

　　不应该是刚好相等吗？怎么会被挤出去？是哪里出了问题啊？求大神解答/期待的小眼神

    #box{//外边框
        border: 5px solid #d00;
        width: 200px;
        height: 40px;
    }
    input{
        outline: none;
        padding: 0;
        border: 0 none;
    }
    input:nth-child(1){//输入框
        width: 150px;
        height: 40px;
    }
    input:nth-child(2){//按钮
        width: 50px;
        height: 40px;
    }
    #big{//背景
        width: 400px;
        height: 200px;
        background: #000;
    }

html

    <div id="big">
        <div id="box">
            <input type="text">
            <input type="button" value="测试">
        </div>
    </div>

Answer 1

把你的html改成这样

<div id="big">
        <div id="box">
            <input type="text"><input type="button" value="测试">
        </div>
    </div>