关于内联元素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>
展开
收起
1
条回答
写回答
写回答
-
IT从业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等也是一样2019-07-17 19:29:10赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
