【求助】input元素的内容区的高度设置于 意料的不同

.form{ margin: 16px 10px; } .form-group{ margin: 10px 0; } .form-control{ display: block; width: 100%; box-sizing: border-box; font-size: 16px; line-height: 1; padding: 7px 10px; border-radius: 5px; border: solid 1px #dddddd; } .form-label{ font-size: 16px; font-weight: bold; } [type="checkbox"]{ position: absolute; clip: rect(0,0,0,0); } .checkbox{ display: inline-block; width: 20px; height: 20px; border: solid 1px #dddddd; vertical-align: baseline; box-shadow: 0px 0px 2px #cccccc inset; } :checked + .checkbox::before{ position:absolute; content: " "; display: block; width: 15px; height: 4px; border-left: solid 2px deepskyblue; border-bottom: solid 2px deepskyblue; transform: rotate(-45deg); transform-origin: left top; margin: 12px auto 0; } .btn{ display: inline-block; font-size: 16px; line-height: 1; padding: 7px 10px; background-color: #ffffff; border: 1px solid #dddddd; border-radius: 5px; }
</head>
<body>
    <form class="form" name="userForm">
        <div class="form-group">
            <label class="form-label" for="userForm-email">Email address</label>
            <input type="email" class="form-control" name="email" id="userForm-email" />
        <div>
        <div class="form-group">
            <label class="form-label" for="userForm-psd">Password</label>
            <input type="password" class="form-control" name="password" id="userForm-psd" />
        </div>
        <div class="form-group">
            <input  type="checkbox" name="checkme" id="userform-checkme" />
            <label for="userform-checkme" class="checkbox"></label>
            <label for="userform-checkme">Check me out</label>
        </div>
        <div class="form-group">
            <input class="btn btn-default" type="submit" value="submit" />
        </div>
    </form>

页面中 input.form-control 内容区的高度为 19.2
与之同样设置相同的 行高，字号的 input[type='button'] 的按钮是 16
为什么会这样呢?

https://blog.csdn.net/Alcantara/article/details/81939908

有默认样式，先把默认样式清除掉再试试！