Doctypeタグを追加し、ボタンの高さを変更しました

Question

<div class="searchbox"> 
    <form> 
     <input type="text" name="src-txt" class="src-txt"/> 
     <input type="submit" value="" name="src-btn" class="src-btn"/> 
    </form> 
</div> 


.searchbox { 
    float: left; 
    width: 35%; 
    height: 30px; 
    margin-top: 25px; 
    margin-left: 3%; 
    border: 1px solid red; 
} 

.src-txt { 
    float: left; 
    width: 80%; 
    height: 100%; 
    border: 2px solid #3682c4; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    padding: 5px; 
} 

.src-btn { 
    float: left; 
    width: 15%; 
    height: 100%; 
    background-color: #3682c4; 
    background-image: url("../content/src_img.png"); 
    background-repeat: no-repeat; 
    background-position: center; 
    border: none; 
    cursor: pointer; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

これは正常に動作していますが、追加した後にDOCTYPE htmlが頭の検索ボタンの高さが減少したためです。

変更された内容を理解できません。

理由は何ですか？

コードの変更は何ですか？

Answer 1

！DOCTYPE htmlを追加した後に高さを上げることはできませんでしたか？ htmlタグは100％の高さに設定されていますか？時々それが私のコードに問題を引き起こしました。