两个块级标签行内展示时错位问题

两个块级标签行内展示时错位问题

---

我们在将两个块级标签进行同一行展示时可以通过设置display: inline-block来达到效果，如下：

<style> 
  input,p{
  	display: inline-block;
  }
</style>
<div>
	<input type="text" id="text" />//实际上input默认就是inline-block，实际运用中可以不写它
	<p>请输入1~9的数字</p>
</div>

---

可是，当我们给文本设置一个宽度且宽度小于文本的宽度时，如，我设置了文本宽度为35px，你会发现他们错位了：

---

这时候就需要我们用到 vertical-align 了，这个属性是用来设置垂直对齐方式，很多人可能误认为将它的属性值设置为middle元素就会在页面中居中，其实不然，毫无毛用。它真正的含义是是：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值,这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

---

它的默认值是 baseline ，含义是元素放置在父元素的基线上，如图：

在这个例子中，父元素就是div，如图可以看到，行内元素都放置在div的底线出，这个就是 baseline 的作用了，除此之外，我们可以设置属性值为middle，效果如下：

我们可以看到，此时，同一行标签的对齐是以父元素的中线为准的。

---

另外，vertical-align 属性值设置为百分比时，要记得，它是相对于行高来算的，即line-height,还是上面那个例子，当我设置如下属性时，效果是等价的

{
  line-height: 40px;
  vertical-align: -90%;
}
等价于
{
  line-height: 40px;
  vertical-align: -36px;    
}

补充：我们有时候设置布局时，比如设置一张图片，然后需要给图片设置一个背景色，我们常常会发现图片和背景的底部总是留有缝隙，实际上就是verhical-align和line-height搞的鬼，如图所示：

verhical-align默认是baseline，它的含义如上面所示，在父元素中有着一条我们看不见却处处存在的基线 ，所以造成上面的间隔。当我设置行高为15px时，很明显可以看到间隔变小了，如图所示：

另外，我们也可以设置img{display:block} 这样，图片展示将成为块级展示，而使verhical-align失效，因为它针对的是行级展示的元素。

---

转载于:https://www.cnblogs.com/fsn-nervergiveup/p/9747995.html