为何location-bar 内的行内块元素不用vertical-align会偏移？

为何location-bar 内的行内块元素不用vertical-align会偏移？而不是在父元素内

lcyjerry 2020-04-20

源自：实战：美团外卖-首页实现 2-3 首页-头部样式（2）

33

收起

4回答

好帮手慕粉 2020-04-21 18:02:17

同学你好，因为纵向也有间隙啊：

老师只是给同学举了横向的例子，纵向上也是一样的。

祝学习愉快~

好帮手慕粉 2020-04-21 16:25:26

同学你好，关于同学的问题回答如下：

1、我们可以举个例子看下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<!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、在这也是一样的，由于文本节点造成的间隙，子元素超出了父容器。所以即使同学增加了父容器的高度，这个间隙也还是存在的，要把父元素的高度调整的更高一点：

祝学习愉快~

提问者 lcyjerry #1

为啥是加高度而不是宽度呢？

2020-04-21 17:37:24

好帮手慕粉 2020-04-21 09:36:33

同学你好，在把vertical-align去掉的情况下，子元素会超出父元素是因为图片和文字设置的是行内块：

而行内块之间有默认的间隙。我们可以给父元素设置font-size：0消除这个间隙：

祝学习愉快~

提问者 lcyjerry #1

为什么通过消除间隙就可以让行内元素在父容器内部了，为什么让父容器的宽度增加不行？

2020-04-21 11:44:48

好帮手慕粉 2020-04-20 19:23:09

同学你好，因为这块的内容继承了body的行高，所以内容被撑了下去，我们可以先把vertical-align属性去掉看下：

这是继承的body的行高：

因为设置行高时没有加单位，设置的是1，那么就是页面根元素的大小的1倍，也就是页面根元素字体大小的一倍：

所以在这个页面，是继承了32px的行高。

视频老师就通过设置vertical-align属性对这两个元素进行了调整。

祝学习愉快~

提问者 lcyjerry #1

我用的是iphone678的模拟器，行高应该是37.5吧？高度也够啊

2020-04-20 19:36:59
提问者 lcyjerry #2

为什么会被撑下去啊？我的子元素高度都小于父容器的高度啊？

2020-04-20 20:06:01

相似问题

块级元素设置了display属性为table-cell后，是具有了行内元素的属性吗？

老师，关于vertical-align填写数值为什么会变成行高样式

常见的行内块元素有哪些呢？

为什么搜索框不用input标签？用的是p标签？

为什么设置为行内块无法设置文字居中，必须要块级元素

登录后可查看更多问答，登录/注册

3.WebAPP开发与小程序

参与学习人
提交作业 622 份
解答问题 6815 个

微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。

本课精华内容

问答作业

代码分享-模仿高德官网效果做的

129 1

为什么图片这么大

27 15

老师帮我看下为什么谷歌浏览器点不了进度条没次点击都会重新播放用火狐浏览器就是可以的

34 14

这两个公式怎么推导出来的？

40 13

laoshi老师

57 13

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号