请问为什么黑色的input会跑出来啊？
把input的display属性改为block或者把两者的height改得大一点比如：50px,input才会进去，
但是即使是display：inline也不应该跑出来啊？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; border:0}
#div{width:50px; height:5px;border:1px solid #F80202;}
#input{ width:30px; height:5px;background:#000000; line-height:5px; vertical-align:middle}
</style>
</head>
<body>
<div id="div">
<input id="input" type="text">
</div>
</body>
</html>
1.与line-height，vertical-align有关。
2.一般默认字体大小16px，在#div里面字体大小当然也是16px了。当inline-block和文字在一行时（空格也算，不过没有空格，浏览器也是当作有文字对待的，测试结果），会有什么效果应该不用细讲吧。你设置的vertical-align：middle，会把input中心和文字baseline对齐，显然会有input被拉下去的效果。原理知道，想改也就有很多种方式了。父元素字体设置0px或者vertical-align：top
3.input是inline-block元素，这里换成img等也是一样
老大试一下input的高小于div两个像素以上看看！！