关于内联元素input的问题

请问为什么黑色的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>

html css

阅读 3.2k

2 个回答

得票最新

xgszl33614

731

发布于
2015-12-21

✓ 已被采纳

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等也是一样