关于消除间隙的第二种方法的两个疑问

关于消除间隙的第二种方法的两个疑问

第一个:我明白设置font-size为0px时可以消除间隙,但是后来给div设置了font-size为16px,这是div不是变成16px了吗,那么这个时候应该间隙又回来了呀?为什么设置成16px之后依然会使间隙消除?

第二个:.one是div的父元素,也就是说.one是包含着div,也就是三个div应该是.one元素的内容,对吗?

http://img1.sycdn.imooc.com//climg/5be2af48000177a308990548.jpg

那么这个时候,如果我设置了div为16px,那么我的三个div就有了内容,也就有了宽度和高度,那么外面的.one因为变成了行内元素,他们的宽度和高度难道不会跟着也变化吗,不应该是都随着内容的变换而发生变化吗,但是为什么只是宽度变了,而所占据的高度依旧只是2px的border值?http://img1.sycdn.imooc.com//climg/5be2b0c30001b0bf19160886.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

你好,第一个问题,间隙是不会回来的。

因为这里的font-size:0;设置的是父级元素.one的,后来设置div,是设置了.one三个元素,因为直接设置标签元素的权值是没有类名设置的高的,所以父级会采用.one设置的font-size:0;所以是不会回来的。

第二个问题,虽然div就有了文字内容,可以撑开div的这个宽高,但是父级的这个div也是行内元素,所以无法无法有子元素撑开,因为这里由于父级设置了font-size为0 ,所以无法撑开,可以把这个去掉,就会发现高度是有改变的。

http://img1.sycdn.imooc.com//climg/5be2bc7e00017ec302370097.jpg

若能帮助到你,望采纳。

祝学习愉快!

  • 宝慕林842399 提问者 #1
    第一个问题我明白了,但是第二个问题,为什么将父元素.one的font-size设置为0之后就无法撑开了?
    2018-11-08 15:34:22
  • 宝慕林842399 提问者 #2
    谢谢老师,我大致懂了
    2018-11-08 19:24:46
好帮手慕糖 2018-11-08 17:50:01

同学你好,这里主要是由于多种样式之间组合而产生的一种效果。可以记录下这种现象,以及产生原因。主要的还是要会有解决方式,解决方式的话,可以不把.one元素设置行内元素,或者把所有的div都设置为行内块。

若能帮助到你,望采纳。

祝学习愉快!

好帮手慕糖 2018-11-08 16:11:32

同学你好,行内元素是有内容撑开宽度的,这里的父级也是个行内元素,但是这个父级的font-size为0,所以就没有办法撑开了,可以结合如下测试下,元素设置行内元素,设置font-size,它的内容(这里的内容直接是文本)无法撑开高度,所以本身也不显示,例:

http://img1.sycdn.imooc.com//climg/5be3ef6d0001dbbd03350364.jpg

若能帮助到你,望采纳。

祝学习愉快!

  • 提问者 宝慕林842399 #1
    我有点了解了,因为.one的内容有空格为大小0px,所以其无法撑起来,但是为什么宽度可以撑起来?这个是硬性规定的吗?
    2018-11-08 17:15:20
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师