如何在两个不同的HTML元素之间保持高度和宽度？

我希望仅使用CSS和html使用

input

元素来保持我的

img

元素的高度。任何指导都将不胜感激，因为我对这些东西很陌生。 下面是代码的一些部分

<!-- Main section of the html part--> 
<main>
 <!-- Division with Search Bar as an input element and the svg as an image--> 
            <div class="searchDiv">
                <!-- A label --> 

                  <label class="searchBar" id="search">Taste of home right at your finger tips <br>   </label>
                 <!-- Search Bar --> 
                  <input type="text" id="searchBar1" class="searchBar">

                 <!-- SVG image--> 
                  <img id="searchBtn" src="css/SVGS/magnifying-glass.svg"> 

             </div>

        </main>

---

问题在于填充和边距，删除它们并写入高度和宽度值应该可以解决问题。 这是我的代码（我还更正了你在html中的评论，评论是，不是）

#搜索栏1{
宽度：3.45%；
身高：3.45%；
浮动：左；
盒影：0 1px 1px 0 rgba（0,0,0,0.2），0 1px 2px 0 rgba（0,0,0,0.19）；
}
#搜索BTN{
身高：3.45%；
宽度：3.45%；
浮动：左；
边界：无；
背景色：白色；
}
家的味道就在你的指尖

我ḿ 很高兴看到新成员加入社区

请尝试一下

html注释中的注释由 像这样

家的味道就在你的指尖

我也试过tag，但不起作用。这里是CSS部分
@媒体屏幕和屏幕（最小宽度：1200px）{
#搜索栏1{
/*精氨酸：4%自动31%*/
}
}
#搜索BTN：悬停{
背景颜色：蓝色；
盒影：0 1px 3px 0黑色；
}
#搜索BTN{
位置：固定；
宽度：20px；
高度：20px；
浮动：左；
边界：无；
框大小：边框框；
背景色：白色；
边框：实心薄rgba（74,87,98,0.61）；
盒影：0 1px 1px 0 rgba（0,0,0,0.2），0 1px 2px 0 rgba（0,0,0,0.19）；
}
.a{
边界半径：120px；}
家的味道就在你的指尖

谢谢，但这不起作用，我已经试过了。我只是通过填充来尝试尝试错误，但没有运气。这很奇怪。我发送给您的代码导致输入和图像大小相同，至少对我来说是这样。你测试过我的代码吗？你用的是什么浏览器？我用的是带括号的Chrome浏览器。高度和宽度将不同步。我的主要问题是，元素的高度。不，它没有。这很奇怪，对我来说很完美。抱歉没有早点回答/帮助，我正在帮助另一个人，而且已经很晚了。。。祝你的项目好运；）

    #searchBar1 {

    float:left;

    box-sizing: border-box;
    margin: 4% auto auto 26%;
    padding:0.99% 22% 0.4%  1%;

    border: solid thin rgba(74, 87, 98, 0.61);
    border:none;
    border-right:none;

    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);


}

@media screen and (min-width: 1200px) {
  #searchBar1 {
      margin: 4% auto auto 31%;
  }
}


#searchBtn {
    width: 3.45%;
    margin-bottom: 0.2%;
   float:left;
    border: none;
    box-sizing: border-box;
    background-color: white;
    margin-top: 4%;
    padding: 1% 1% 1.1% 1%;



    border-left:dashed thin rgba(74, 87, 98, 0.61);
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);

}

<style>
#searchBar1 {
    width: 3.45%;
    height: 3.45%;
    float:left;


    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);


}



#searchBtn {
    height: 3.45%;
    width: 3.45%;
    float:left;
    border: none;
    background-color: white;

}
</style>
<main>
 <!-- Division with Search Bar as an input element and the svg as an image--> 
            <div class="searchDiv">
                <!-- A label --> 

                  <label class="searchBar" id="search">Taste of home right at your finger tips <br>   </label>
                 <!-- Search Bar --> 
                  <input type="text" id="searchBar1" class="searchBar">

                 <!-- SVG image--> 
                  <img id="searchBtn" src="css/SVGS/magnifying-glass.svg"> 

             </div>

        </main>