首页 > 软件开发 > HTML >

html布局中图片之间下面有空白间隙如何解决

来源:互联网 2023-03-16 19:19:03 134

我们在做网页效果的时候,经常会在布局样式中出现各种奇奇怪怪的问题,比如图片之间会有空白间隙,上下也有空白,那么遇到这种情况该怎么解决呢,一起来看看吧!cNr办公区 - 实用经验教程分享!

html布局中图片之间下面有空白间隙如何解决cNr办公区 - 实用经验教程分享!

工具/原料

  • 电脑(DELL)
  • 系统:win10
  • Hbuilder

方法/步骤 设置vertical-align

  • 1

    打开hbuilder,写入html布局,基本样式,点击预览。cNr办公区 - 实用经验教程分享!

    html布局中图片之间下面有空白间隙如何解决cNr办公区 - 实用经验教程分享!

  • 1此文章非法爬取自百度经验
  • 2

    发现图片之间,图片下面有空白间隙。cNr办公区 - 实用经验教程分享!

    html布局中图片之间下面有空白间隙如何解决cNr办公区 - 实用经验教程分享!

  • 3

    设置图片的垂直对齐方式vertical-align,发现图片下方空白消失。cNr办公区 - 实用经验教程分享!

    html布局中图片之间下面有空白间隙如何解决cNr办公区 - 实用经验教程分享!

  • 方法/步骤2 设置图片display: block

  • 1

    把图片设置成块状元素,设置display: block,间隙都没有了,但是布局又发生了变化,不是很完美。cNr办公区 - 实用经验教程分享!

    html布局中图片之间下面有空白间隙如何解决cNr办公区 - 实用经验教程分享!

  • 方法/步骤3 设置父级font-size:0

  • 1

    发现方法1只消除了图片下方的空白间隙,但是图片与图片之间的间隙并没有消失,方法2空白间隙都消失了,但是布局变了,都不是最好的解决方案,这个时候,我们需要给父级设置font-size:0,发现所有的空白都没有了,完美解决!cNr办公区 - 实用经验教程分享!

    html布局中图片之间下面有空白间隙如何解决cNr办公区 - 实用经验教程分享!

  • 注意事项

    • 小编个人项目经验,如果帮到你了,记得给我点个赞,谢谢。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!cNr办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码