为什么设置display:inline-block;才能让蓝色块下移，

为什么设置display:inline-block;才能让蓝色块下移，inline或block都不可以

display:inline-block;

margin:35% 35%;

源自：CSS定位（position） 2-10 编程练习

收起

3回答

好帮手慕码回答被采纳获得+3积分 2020-03-11 21:39:21

同学你好，老师看明白同学问题的意思了。可以先看下这个问题：当.son设置display: block;的时候，效果如下：

可以看到，son的真实位置如红框中所示，其实在垂直方向中也是有效果的。如果还是看的不太明显的话，注释掉父级的外边距设置再看下：

子级设置的外边距影响到了父级，父级跟着子级一起下落了！这个现象在浏览器中是一个特殊的现象，同学需要记住。（如果不想让父级跟着一起下落，可以给父级添加border，或者是给子级设置浮动，浮动的效果等同于display:inline-block;）

其次关于同学的代码：子级设置display:inline-block; 并不会出现父级跟着子级一起下落这一现象，所以在效果上：子级设置display:inline-block; 、margin:35% 35%;可以使它在垂直方向也有效。

比较绕，同学可以结合代码理解一下。

祝学习愉快~

好帮手慕码 2020-03-11 18:59:33

同学你好，解答如下：

（1）内联元素设置上下外边距是不生效的，只有左右外边距生效：

（2）块级元素通过margin是无法实现垂直居中的：

而 margin:35% 35%;和margin:auto auto;的原理一样，只能实现左右的间隙一致，不能实现上下间隙一直，因为无法计算body的高度。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

提问者慕慕4335856 #1

老师，回答我没看懂，我是问，为什么设置了display:inline-block；这个margin:35% 35%;就可以垂直方向也起作用，我知道inline和block为什么不可以，不知道为什么inline-block就可以我设置display:inline-block; margin:35% 35%;后结果是蓝色块大概在红色块中间为什么display:inline-block;可以是margin垂直方向也可以有效？

2020-03-11 20:44:23
提问者慕慕4335856 #2

最后一行错了一个字：可以使 margin垂直方向

2020-03-11 20:45:34

好帮手慕码 2020-03-11 13:38:20

同学你好，请把代码粘贴至问答区进行提问，以便准确的帮助同学分析解决。

祝学习愉快~

提问者慕慕4335856 #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*完善下列代码*/ .per{ width: 300px; height: 300px; background: red; margin-left:200px; margin-top: 200px; position:relative; } .son{ width: 100px; height: 100px; background: blue; display:inline-block; /*display:inline;*/ /*display:block;*/ margin:35% 35%; } </style> </head> <body> <div class="per"> <div class="son"></div> </div> </body> </html>

2020-03-11 17:41:28