首页 > 软件开发 > HTML >

html行内元素之间有空白间隙怎么解决

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

我们在制作网页的过程中,经常会遇到html元素之间有空白间隙,html元素空白间隙主要出现在行内元素中(如li、img、a、span等),是由于换行符、tab(制表符)、空格等不可见字符引起的。一起看看怎么解决。CHN办公区 - 实用经验教程分享!

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

html行内元素之间有空白间隙怎么解决CHN办公区 - 实用经验教程分享!

工具/原料

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

方法/步骤 删除元素之间的空格、换行

  • 1

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

    html行内元素之间有空白间隙怎么解决CHN办公区 - 实用经验教程分享!

  • 1该信息未经授权抓取自百度经验
  • 2

    发现各元素之间有空白间隙。CHN办公区 - 实用经验教程分享!

    html行内元素之间有空白间隙怎么解决CHN办公区 - 实用经验教程分享!

  • 3

    删除元素之间的换行,空格,发现元素的空白间隙没有了,但是html的排版很不美观。CHN办公区 - 实用经验教程分享!

    html行内元素之间有空白间隙怎么解决CHN办公区 - 实用经验教程分享!

  • 方法/步骤2 设置父级元素font-size: 0

  • 1

    第一种方法虽然能解决元素之间空白间隙的问题,但是html格式排版不美观,这样治标不治本,我们推荐下面这种方法!CHN办公区 - 实用经验教程分享!

    html行内元素之间有空白间隙怎么解决CHN办公区 - 实用经验教程分享!

  • 2

    设置行内元素自身的font-size的值,然后设置父级元素的font-size:0。完美解决这个空白间隙的问题!CHN办公区 - 实用经验教程分享!

    html行内元素之间有空白间隙怎么解决CHN办公区 - 实用经验教程分享!

  • 注意事项

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

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


    标签: HTML

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