input and button, same css, different heights - html

Question

I am having same css properties, yet the button and input fields are different fields
.input-con {
position: relative;
}
.input-con>* {
line-height: 1;
display: inline-block;
vertical-align: middle;
padding: 10px;
border: 0;
background-color: #ddd;
color: #444;
outline: 0;
cursor: pointer;
font-size: 15px;
box-sizing: border-box;
}
<div class="input-con">
<input type="text" />
<button>Search</button>
</div>
pen - https://codepen.io/digitalzoomstudio/pen/LOoVYK
How could I achieve same heights without forcing height property ?

Answer 1

You can use flex box , just add display:flex; on the parent (input-con)
.input-con {
position: relative;
display:flex;
}
.input-con>* {
line-height: 1;
display: inline-block;
vertical-align: middle;
padding: 10px;
border: 0;
background-color: #ddd;
color: #444;
outline: 0;
cursor: pointer;
font-size: 15px;
box-sizing: border-box;
margin-right:2px;
}
<div class="input-con">
<input type="text" />
<button>Search</button>
</div>

Answer 2

The reason you are seeing a discrepancy in the height is due - I think - to the font property, which includes shorthand for font-weight, font-size and font-family.
If you explicitly override this property for both input and button the height will match up.
.input-con {
position: relative;
}
.input-con>* {
line-height: 1;
display: inline-block;
vertical-align: middle;
padding: 10px;
border: 0;
background-color: #ddd;
color: #444;
outline: 0;
cursor: pointer;
font-size: 15px;
box-sizing: border-box;
}
input,
button {
font: 400 15px Arial !important;
}
<div class="input-con">
<input type="text" />
<button>Search</button>
</div>
updated as per comment
It will not work to declare font-weight, font-size and font-family separately, as this does not override the font shorthand completely.
The full shorthand is:
font: font-style font-variant font-weight font-size/line-height font-family;
Only if each of these properties is declared will the font property be overridden.
Note that font contains three separate properties for font-variant (ligatures, caps and numeric) - it seems that using font-variant is sufficient.
demo
.input-con {
position: relative;
}
.input-con>* {
/* override all properties of the 'font' shorthand */
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 18px;
line-height: normal;
font-family: Arial, sans-serif;
display: inline-block;
vertical-align: middle;
padding: 10px;
border: 0;
background-color: #ddd;
color: #444;
outline: 0;
cursor: pointer;
box-sizing: border-box;
}
<div class="input-con">
<input type="text" />
<button>Search</button>
</div>

Answer 3

You added line-height: 1; which makes difference
.input-con {
position: relative;
}
.input-con>* {
/*line-height: 1;*/
display: inline-block;
vertical-align: middle;
padding: 10px;
border: 0;
background-color: #ddd;
color: #444;
outline: 0;
cursor: pointer;
font-size: 15px;
box-sizing: border-box;
}
<div class="input-con">
<input type="text" />
<button>Search</button>
<input type="text" />
</div>

Answer 4

Just add display:flex like this
.input-con {
position: relative;
display:flex;
}
Learn more about flex

Answer 5

Yes indeed Flexbox is the way to go, but if you're curious as why you're getting this behavior CSS Tricks has a good article https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 6

Try with this it may help
.input-con {
position: relative;
}
.input-con{
position:relative;
>*{
vertical-align:middle;
padding: 10px;
border:0;
background-color: #ddd;
color: #444;
outline:0;
cursor:pointer;
font-size: 15px;
}
}