How to adjust the spacing between input text and input submit [duplicate] - html

Question

This question already has answers here:
spacing between form fields
(4 answers)
Closed 3 years ago.
I'm working on an autocomplete form, but I seem to have some issues with the padding between the text and submit form. I cannot seem to adjust the spacing between the text and submit items, which I need because when I increase the size of the text field, it overwrites the submit button. I believe I've tried all types of padding but they do nothing. Can someone give me a clue please?
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: 1px solid;
padding: 5px;
font-size: 24px;
}
input[type=text] {
border-color: #808080;
background-color: #fff;
width: 100%;
-webkit-border-radius: 5px;
padding: 5px;
}
input[type=submit] {
margin-left: 5px;
padding: 5px;
background: #ccc;
cursor: pointer;
-webkit-border-radius: 5px;
border: 1px solid;
background-color: DodgerBlue;
border-color: #CCCCCC;
color: #fff;
}
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>

Answer 1

Add box-sizing: border-box to your input[type=text] - the default content-box setting means that when you add padding to an element it increases its dimensions.
See demo below:
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: 1px solid;
padding: 5px;
font-size: 24px;
}
input[type=text] {
border-color: #808080;
background-color: #fff;
width: 100%;
-webkit-border-radius: 5px;
padding: 5px;
box-sizing: border-box; /* added */
}
input[type=submit] {
margin-left: 5px;
padding: 5px;
background: #ccc;
cursor: pointer;
-webkit-border-radius: 5px;
border: 1px solid;
background-color: DodgerBlue;
border-color: #CCCCCC;
color: #fff;
}
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>
You can see more examples here:
Add border to div increase div width?
border-box isn't working as expected

Answer 2

Have you tried using between your input text and submit button?
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: 1px solid;
padding: 5px;
font-size: 24px;
}
input[type=text] {
border-color: #808080;
background-color: #fff;
width: 100%;
-webkit-border-radius: 5px;
padding: 5px;
}
input[type=submit] {
margin-left: 5px;
padding: 5px;
background: #ccc;
cursor: pointer;
-webkit-border-radius: 5px;
border: 1px solid;
background-color: DodgerBlue;
border-color: #CCCCCC;
color: #fff;
}
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>

Answer 3

You can increase the value of margin-left in input[type=submit] {} like shown below:
input[type=submit] {
margin-left: 10px; /* increased value */
padding: 5px;
background: #ccc;
cursor: pointer;
-webkit-border-radius: 5px;
border: 1px solid;
background-color: DodgerBlue;
border-color: #CCCCCC;
color: #fff;
}
or add margin right to the previous element like shown below:
input[type=text] {
border-color: #808080;
background-color: #fff;
width: 100%;
-webkit-border-radius: 5px;
padding: 5px;
margin-right: 5px; /* add margin right */
}