首页 > 软件开发 > HTML >

HTML-添加的图片下面出现空行解决方法

来源:互联网 2023-03-16 19:12:45 251

在html中处理图片的时候,你是否发现有时候图片跟下面的边框有一个空行,而属性设置中根本没有这样的设置,这时候该怎么办呢QOn办公区 - 实用经验教程分享!

工具/原料

  • HTML

方法/步骤

  • 1

    如图,在html中插入多张图片,然后对其添加修饰QOn办公区 - 实用经验教程分享!

    HTML-添加的图片下面出现空行解决方法QOn办公区 - 实用经验教程分享!

  • 2

    现在我们的效果是这样的,整个大框里面包含三个小图,大框的边框是红色的QOn办公区 - 实用经验教程分享!

    HTML-添加的图片下面出现空行解决方法QOn办公区 - 实用经验教程分享!

  • 3

    然后我们设置将这三个图形浮动下,变成横排的QOn办公区 - 实用经验教程分享!

    HTML-添加的图片下面出现空行解决方法QOn办公区 - 实用经验教程分享!

  • 4

    将三个图形浮动了后,开始的红色边框,因为浮动的缘故,并不能扩展整个画布了,这时候需要在父级添加overflow:hidden;或者在浮动后面添加clearfix清除浮动命令才可以QOn办公区 - 实用经验教程分享!

    HTML-添加的图片下面出现空行解决方法QOn办公区 - 实用经验教程分享!

  • 5

    这时候可以看到图形离下面的红色边框有一个空行间隔,QOn办公区 - 实用经验教程分享!

    HTML-添加的图片下面出现空行解决方法QOn办公区 - 实用经验教程分享!

  • 5此文章未经授权抓取自百度经验
  • 6

    这个时候,将img设置为块状标签,如图所示QOn办公区 - 实用经验教程分享!

    HTML-添加的图片下面出现空行解决方法QOn办公区 - 实用经验教程分享!

  • 7

    这样设置一下后,图形和下面边框的间隔就会消失了。QOn办公区 - 实用经验教程分享!

    QOn办公区 - 实用经验教程分享!

    QOn办公区 - 实用经验教程分享!

    HTML-添加的图片下面出现空行解决方法QOn办公区 - 实用经验教程分享!

  • 注意事项

    • 如果此经验对您有帮助,请左侧投票/关注,谢谢大家的支持^_^

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


    标签: HTML软件

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