Why height text box is less than button? - css

Question

Why height text box is less than button?
My Code :
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,#but {
float: left;
}
#but ,.txt {
border: 1px solid #999;
padding: 10px;
font-size: 20px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>

Answer 1

The <input> element, is one of the replaced elements, and In CSS, a replaced element is an element whose representation is outside the scope of CSS. It has some special styles from browser user agent stylesheet, and they don't get inherited by default, such as font-family, font-size, line-height etc., and those rules can determine a box's height.
You can force them to get inherited by setting <property>: inherit;, so that the <input type="text"> can inherit those styles from <div class="t"> and its parent <div id="container"> etc., so it will be able to get the same style as the <div id="but">, in order to make them the same height.
You can set those specific styles on the input box directly, but using inherit can prevent from overriding rules.
#container {
font-size: 20px;
overflow: auto;
}
.t,
#but {
float: left;
}
.txt {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.txt,
#but {
border: 1px solid #999;
padding: 10px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>
In addition, you will use a <button> tag instead of <div> button in the real case I think. To make the input field and button the same height, you will also need to set the same padding values for them directly.
#container {
font-size: 20px;
overflow: auto;
}
.t,
#but {
float: left;
}
.txt,
#but {
font-family: inherit;
font-size: inherit;
line-height: inherit;
border: 1px solid #999;
padding: 10px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<button id="but"><span>Search</span></button>
</div>

Answer 2

Browser handles difference html element and attribute differently i check it computed tab in chrome developer tool and find out input field render height differently 1 px more in top and bottom so its 2 px actual height you set.
these line will fix your problem, check the snippet for how to apply them.
font-size:16px;
line-height:16px;
height:16px;
font-family:sans-serif;
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,#but {
float: left;
}
#but ,.txt {
border: 1px solid #999;
padding: 10px;
font-size:16px;
line-height:16px;
height:16px;
font-family:sans-serif;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="" placeholder="write a name" />
</div>
<div id="but"><span>Search</span></div>
</div>

Answer 3

/You'll need to do something like this although there is likely to be some differences across systems./
.searchtext {
border:1px solid #000;
border-right:none;
padding:4px;
margin:0px;
float:left;
height:16px;
overflow:hidden;
line-height:16px;
}
.searchbutton {
border:1px solid #000;
background:#fd0;
vertical-align:top;
padding:4px;
margin:0;
float:left;
height:26px;
overflow:hidden;
width:5em;
text-align:center;
line-height:16px;
}

Answer 4

Try giving font-size to all your elements, they will become of equal height.
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,
#but {
float: left;
}
#but,
.txt {
border: 1px solid #999;
padding: 10px;
font-size: 14px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>

Answer 5

The problem is your font-size.
Please try to give font-size to all your elements like in the following fiddle:
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,
#but {
float: left;
}
#but,
.txt {
border: 1px solid #999;
padding: 10px;
font-size: 14px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>

Answer 6

This is not valid selector:
line-height: 100%;
You have to define height to container, or wrap your inner content with:
.container .wrap{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
And then set height: 100% to your #but element.