开头说的这个在一行内展示的样式,是不是用display:inline-block也能实现?

开头说的这个在一行内展示的样式,是不是用display:inline-block也能实现?

正在回答

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

2回答

同学你好,跟margin,padding都为0没有关系哦,所以全设为0也清除不了间隙。其实这些间隙的本质是由回车符导致的,我们可以把两个子div放到一行试试(注意,此时并没有设置margin:0和padding:0):http://img1.sycdn.imooc.com//climg/5dc157910954d71a08350174.jpg

效果:

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

但是在实际开发中我们不可能这样写代码,去除所有的空格和回车,但是这又是inline-block所特有的属性,是规避不了的,所以我们就有了浮动,用浮动来解决这个间隙问题,这也是浮动的意义所在。

希望我的回答能够帮助到你,望采纳,祝学习愉快!


好帮手慕粉 2019-11-05 17:33:18

同学你好,是可以的哦,但是不建议这样做呢,因为设置了display:inline-block之后,元素之间就会有默认的间隙,如果大盒子设置了固定宽度的话,就会有内容被挤下来,例:

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

盒子box的宽度为800px,box1加box2的宽度也为800px,但是box2却被撑到了下一行:

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


这就是display:inline-block存在默认间隙,子盒子的宽度实际是大于父盒子的。

我们也可以调小子盒子的宽度再看一下:

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

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

发现两个子盒子并没有紧贴在一起,中间有间隙。

但是使用浮动就不会有这样的效果哦,所以一般情况下我们都使用浮动来实现,同学可以自己尝试着用浮动实现一下。

希望我的回答能够帮助到你,望采纳,祝学习愉快!


  • 提问者 全栈丶obj #1
    我开始设置css样式,把margin,padding都设置为0,这样能不能清除两个子元素之间的间隔?
    2019-11-05 18:46:35
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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