元素旁边奇怪的可选区域

Question

#nameform, #emailform {
    width: 175px;
    height: 40px;
    padding-left: 10px;
    margin-top: 50px;
    border: 1px solid black;
    border-radius: 5px;
    outline: none;
    margin-left: 30px;
}

<input type="text" name="name" id="nameform" placeholder="First Name and Last Name">
<input type="email" name="email" id="emailform"placeholder="[email protected]">

我似乎无法弄清楚是什么导致某些元素旁边有一个奇怪的可选择区域。

截图1：https://i.imgur.com/vfkWwKm.png 截图2：https://i.imgur.com/iKOQWZx.png

谢谢。

我尝试从 CSS 文件修复问题。我不确定这是否是我应该关注的地方。

编辑1：我添加了一个片段。双击框之间。

编辑 2：原因似乎是 HTML 的结构。问题是，我是一个像素完美的怪胎。如何以赏心悦目的方式排列 HTML，但又不会在元素周围创建空白？

问题：https://i.imgur.com/4TBF0Cg.png

解决方案（某种）：https://i.imgur.com/2um2mFZ.png

有办法在我的 CSS 中修复这个问题吗？

Answer 1

在两个输入的容器上设置

display: flex

 可以解决该问题。它还可以更轻松地使用 

gap

 属性（也在容器上设置）在它们之间引入空间。周围的空间也可以设置为容器上的

padding

，这样一致性更好。