Independant margin for the submit button and the text input-CodePudding

I don't know why, but my text input and my submit button margin are linked, so it's ugly and very annoying.

I have this on my main html file :

.banner {
  width: 100%;
  height: 100px;
  display: inline-flex;
  margin: 0px;
  background-color: #1b2936;
}

.logo {
  width: 200px;
  height: 100px;
}

input[type=text] {
  background-color: #10151b;
  border: #10151b 5px solid;
  border-radius: 7px;
  height: 50px;
  width: 500px;
  color: white;
  font-family: jetbrainsRegular;
}

.search {
  width: 50px;
  height: 50px;
}

.searchbtn {
  margin-top: 0px;
  border: #1fa2f3 5px solid;
  border-radius: 30px;
  background-color: #1fa2f3;
}

.nomargin {
  margin-top: 0;
}

<div >
  <img  src="logo.png">
  <form action="query.php">
    <label>
                <input type="text" id="query" placeholder="Mot" >
            </label>
    <label>
                <button type="submit" ><img src="search.png" /></button>
            </label>
  </form>
</div>

I am searching for a way to unlink their margins...

CodePudding user response：

There is no margin, it's an issue with your form. Try this:

form{
  display:flex;
}

Or (but I don't recommend it):

input[type=text]{
  float:left;
}

Flex gives you much more flexibility (pun intended) and it's much easier to work with. https://css-tricks.com/snippets/css/a-guide-to-flexbox/