css - 一个关乎input，image的vertical-align的问题
问题描述
为什么给input和img设置了margin-top：100px，然后再设置vertical-align：middle会出现这样的诡异现象，input的位置为什么会这样（此时image的margin-top我量了是100px）；还有，如果把input的height调到200px，就变成input比image高一截了（img的margin-top会不正常）。。。《我的理解是middle之后，input不是应该中间和x的基线的x二分之一字高以上对齐吗？》
<html>
<head>
<style type="text/css">
img ,input{
margin-top:100px;
}
form{
font-size:50px;
background-color:pink;
}
input{
height:100px;
vertical-align:middle;
}
</style>
</head>
<body>
<form action="" method="get">
<input type="text" >xX
<input type="submit" >xX
<img src="/i/eg_cute.gif" />xX
</form>
</body>
</html>
补充一下，我把input的vertical-align：middle去掉后是这样的： 我能理解，这个很正常。【当然，也有一点不理解，就是img并没有执行margin-top的css，而是去对齐baseline了，它比input要矮一点，此时input的margin-top是100px;】
还有就是，设置了input的vertical-align：middle，不过input的height比较大为200px时的情况：input的margin-top正常了为100px; img又不正常了。而且和图1的情况一样，为什么input和后面的文字是这样一种看不出规律的位置关系？
在有大神回答之前我说说我个人的理解。可能是错误百出的。研究了一下午脑袋有点大T T。
首先margin值的话。假如设置了100px。如果当前的效果是120px的话大于100px也算满足样式。1.行内元素的布局
有这么句话行盒由行内格式化上下文(inline formatting context)产生的盒，用于表示一行。
就是比如左侧的input它的行盒的高度其实是自身border-box加margin。设置vertical-align:middle;效果应该是行盒的中线（middle）与包含块中线对齐。
2.元素没有基线baseline，则以它的外边距的下边缘为基线
这个链接里有这么句话，所以我想他们的top和bottom是不是也是外边距的边界。
你也可以按照我理解的这个概念结合上面链接里对各种vertical-align的样式做个测试。
起码我测试的结果是符合的。
3.要注意的是input是有baseline的，是内部文本的baseline。而img则是下外边距的边缘。
4.其他的一些资料
视觉格式化模型
这篇关于css - 一个关乎input，image的vertical-align的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
