首页 > 软件开发 > CSS >

如何去除inlineblock间的空白符

来源:互联网 2023-03-16 19:10:39 83

如何去除inlineblock间的空白符。inline是CSS里面其中一种样式,可以设置block,inline和inline-block,而block表示块级元素的意思,inline表示行内元素,但是会有空白符出现,现在这里就教大家怎么解决这个问题。7Oz办公区 - 实用经验教程分享!

如何去除inlineblock间的空白符7Oz办公区 - 实用经验教程分享!

工具/原料

  • windows 7
  • sublime text 3
  • IE 11

方法/步骤

  • 1

    打开编辑器,新建一个HTML文件,并且写入基本的结构框架。7Oz办公区 - 实用经验教程分享!

    如何去除inlineblock间的空白符7Oz办公区 - 实用经验教程分享!

  • 2

    创建一个CSS文件,并且link rel="stylesheet" type="text/css" href="index.css">用这个来进行连接。7Oz办公区 - 实用经验教程分享!

    如何去除inlineblock间的空白符7Oz办公区 - 实用经验教程分享!

  • 3

    现在我们设置CSS的样式,就能看到如果用inline-block后有空隙。7Oz办公区 - 实用经验教程分享!

    如何去除inlineblock间的空白符7Oz办公区 - 实用经验教程分享!

    如何去除inlineblock间的空白符7Oz办公区 - 实用经验教程分享!

  • 3本页面未经授权抓取自百度经验
  • 4

    我们可以在三个样式里面加入float: left;这样就没有间隙了。7Oz办公区 - 实用经验教程分享!

    如何去除inlineblock间的空白符7Oz办公区 - 实用经验教程分享!

    如何去除inlineblock间的空白符7Oz办公区 - 实用经验教程分享!

  • 5

    我们也可以在外层添加一个div标签来包围所有内容。7Oz办公区 - 实用经验教程分享!

    如何去除inlineblock间的空白符7Oz办公区 - 实用经验教程分享!

  • 6

    .box {7Oz办公区 - 实用经验教程分享!

    word-spacing: -1em;7Oz办公区 - 实用经验教程分享!

    }7Oz办公区 - 实用经验教程分享!

    然后给最外层设置这个样式来统一行内的空隙位置,也是会有同样的效果。7Oz办公区 - 实用经验教程分享!

    如何去除inlineblock间的空白符7Oz办公区 - 实用经验教程分享!

  • 注意事项

    • 注意比较两种方法的特点

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


    标签: CSSHTML

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