父元素宽度800px

两个并列子元素宽度设为50%,并且使用了display:inline-block

结果一运行,两个元素不在同一行?

我查审元素,两个子元素div的宽度都是400,也没有边框,边距的影响。400+400=800,看着没问题吧

后来经过百度发现,原来是两个子元素标签之间存在空白字符的影响。

比如下面这两个子元素



上一个div结束标签和下一个div开始标签,没在一行吧,那中间是不是存在你看不见的换行?

对,就是它影响了

所以解决方案很简单

上一个div的结束标签和下一个div的结束标签写在一行。

就没问题了

不过一代码格式化,得,代码自动换行了。

那就采用另外一种方法

父元素设置font-size:0

这意味这那个换行的空白字符大小是0,没有它位置好吧,0。就不会造成两个div之间的间隙了。

我看百度说父元素设置了font-size:0之后,子元素要设置回font-size的大小,这样文字才能正常显示

我在子元素没有设置回font-size,文字还是显示的。

我就想是不是因为文字有span包裹,但是删除span后,也没问题

当然还有其他解决方案,不过我只提到的我认为是个不错的解决方案的。如果你想要其他解决办法,可以继续搜索。

【前端】display:inline-block中间的间隙的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. Serilog文档翻译系列(七) - 应用设置、调试和诊断、开发接收器

    01.应用设置 Serilog 支持在 App.config 和 Web.config 文件中使用简单的 配置语法,以设置最低日志级别.为事件添加额外属性以及控制日志输出. Serilog 主要通过代 ...

  2. ftrace在应用上的使用

    之前介绍通过命令行配置和使用ftrace功能,但是实际中,我们也会希望抓C/C++程序中某段代码的调度情况.笔者前不久就遇到这种问题,某个函数调用时延概率超过100ms,是为什么?这时候就需要在他们代 ...

  3. 001 C#配置多个版本Swagger说明

    1. AddSwaggerGen AddSwaggerGen 是配置多个版本的swagger的关键 Path.Combine 当前项目运行的路径 UseSwaggerUI 主要分为 2 步骤  : 1 ...

  4. 本地图片上传服务器返回在线地址接口 - file - input -修改头像-带预览功能- 然后使用cropperjs 进行裁剪

    说明:上传的图片是 file 类型 ,核心就是获取图片文件(file类型的) : 实现一:使用 vant2 的图片加载组件 ,选择文件后会触发afterRead方法 ,参数 file 就是文件列表fi ...

  5. feign在服务间传递header

    场景: 用户登陆后,再次访问网页,将用户信息loginToken放在request的header中,首先经过网关,然后到达A服务,然后A服务调用B服务时如何把loginToken传递给B服务 1.修改 ...

  6. docker对的tomcat、mysql、redis、nginx的安装

    本章篇章主要讲解了docker对常用软件的安装说明 总体步骤:搜索镜像.拉取镜像.查看镜像.启动镜像.停止容器.移除容器 tomcat docker seacher tomcat//也可以在docke ...

  7. 云原生爱好者周刊:野心很大的云原生数据库 SurrealDB

    开源项目推荐 SurrealDB SurrealDB 是一个开源的端到端云原生数据库,同时支持 Table.Document 和 Graph 等多种数据模型,对外提供 SurrealQL.GraphQ ...

  8. jmeter测试rpc接口-使用dubbo框架调用

    1.下载用于测试dubbo的spring boot项目 参考文章: http://t.zoukankan.com/111testing-p-11297038.html https://zhuanlan ...

  9. Nuxt.js 应用中的 build:manifest 事件钩子详解

    title: Nuxt.js 应用中的 build:manifest 事件钩子详解 date: 2024/10/22 updated: 2024/10/22 author: cmdragon exce ...

  10. Promise 简单实例一枚

    <script> function t(){ return new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve( ...