为何location-bar 内的行内块元素不用vertical-align会偏移？
来源：2-3 首页-头部样式（2）
lcyjerry
2020-04-20 14:25:12
为何location-bar 内的行内块元素不用vertical-align会偏移？而不是在父元素内
4回答
-
好帮手慕粉
2020-04-21
同学你好，因为纵向也有间隙啊：
老师只是给同学举了横向的例子，纵向上也是一样的。
祝学习愉快~
0 -
好帮手慕粉
2020-04-21
同学你好，关于同学的问题回答如下：
1、我们可以举个例子看下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father { width: 200px; height: 200px; background-color: red; } .one, .two { width: 100px; height: 100px; display: inline-block; } .one { background-color: pink; } .two { background-color: gray; } </style> </head> <body> <div class="father"> <div class="one"></div> <div class="two"></div> </div> </body> </html>按正常来说，两个子div应该是在一行显示，但是由于行内块有默认的间隙，实际宽度超过了100px，所以第二个子元素会被撑到下一行：
这个间隙是由文本节点造成的：
所以我们可以给父元素设置font-size:0，将这些间隙去掉：
2、在这也是一样的，由于文本节点造成的间隙，子元素超出了父容器。所以即使同学增加了父容器的高度，这个间隙也还是存在的，要把父元素的高度调整的更高一点：
祝学习愉快~
0h020-04-21 -
好帮手慕粉
2020-04-21
同学你好，在把vertical-align去掉的情况下，子元素会超出父元素是因为图片和文字设置的是行内块：
而行内块之间有默认的间隙。我们可以给父元素设置font-size：0消除这个间隙：
祝学习愉快~
0h020-04-21 -
好帮手慕粉
2020-04-20
同学你好，因为这块的内容继承了body的行高，所以内容被撑了下去，我们可以先把vertical-align属性去掉看下：
这是继承的body的行高：
因为设置行高时没有加单位，设置的是1，那么就是页面根元素的大小的1倍，也就是页面根元素字体大小的一倍：
所以在这个页面，是继承了32px的行高。
视频老师就通过设置vertical-align属性对这两个元素进行了调整。
祝学习愉快~
0h020-04-20
相似问题