微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

元素换行产生空白间隙问题_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:05:52
原创
1890人浏览过

（1）两个元素，其中一个是块级元素，则一定会换行，换行后，上下两个元素之间会产生空白间隙行
（2）两个都是行内元素，但是行内元素的宽度超过父元素的宽度则自动换行，换行后，上下两个元素之间会产生空白间隙行

我想知道这个空白间隙行产生的原因及解决方法，哪位大神知道的，给小弟讲解下，不甚感激。

boardmix博思白板
boardmix博思白板

boardmix博思白板，一个点燃团队协作和激发创意的空间，集aigc，一键PPT，思维导图，笔记文档多种创意表达能力于一体，将团队工作效率提升到新的层次。

boardmix博思白板 39
查看详情 boardmix博思白板

回复讨论(解决方案)

应该是浏览器的默认样式。
firebug观察下元素的样式？
一般css开头重置样式表，加入 margin:0;padding 0;啥的，去掉默认的margin和padding

其实类似这样的问题，完全可以去避免，最头疼的就是明知不可为而为之
1）既然实现的效果不再一排显示，那么你完全可以两个块级元素，或者 浮动后设置宽度也行
2）子级超出父级，本身就带有兼容性问题，且在IE6下会撑开父级，你可以设置overflow:hidden

另外 显示为 diplay:inline-block;的元素，同排显示，代码换行会被解析，也就是所谓的空白间隙，没什么解决方案，就是浮动，你可以把浮动理解为升级版的 diplay:inline-block;

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：CSS 布局总结??变宽度布局_html/css_WEB-ITnose 下一篇：不容错过的20段CSS代码_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
解决JavaScript页面跳转中图片点击链接失效的问题 本文深入探讨了在JavaScript自定义页面跳转逻辑中，当标签内包含时，点击图片链接失效，而点击文本链接正常的问题。核心原因在于事件处理中e.target与e.currentTarget的区别。通过将e.target.href修正为e.currentTarget.href，可以确保正确获取标签的链接地址，从而实现预期的页面过渡和跳转。
2025-11-13 15:56:41
747
优化Web拖放体验：动态改变鼠标指针为grab 在Web应用中实现拖放功能时，默认的鼠标指针行为可能不符合用户预期，例如显示为not-allowed。本文将介绍一种通过结合JavaScript的拖放事件（dragStart和dragEnd）与CSS样式，动态地将鼠标指针从默认状态更改为grab或grabbing的专业方法，以提供更直观的用户反馈和更流畅的操作体验。
2025-11-13 15:55:21
110
解决HTML邮件模板中条纹表格样式兼容性问题：深入理解与实践 本文探讨在HTML邮件模板中实现条纹表格样式时，nth-child等CSS选择器在邮件客户端中兼容性不佳的问题。针对这一挑战，我们将详细介绍并演示如何通过在每个表格行（）上应用内联样式来确保条纹效果在不同邮件客户端中的可靠呈现，同时提供邮件HTML样式设计的通用最佳实践。
2025-11-13 15:53:03
528
为深色/浅色模式切换滑块集成月亮与太阳图标 本教程详细介绍了如何通过CSS为深色/浅色模式切换器中的滑块添加自定义图标，例如月亮和太阳。通过利用:before伪元素和background-image属性，我们可以在不改变原有HTML和JavaScript逻辑的前提下，实现滑块在不同模式下显示对应图标的视觉效果，从而提升用户体验和界面美观度。
2025-11-13 15:47:40
422
JavaScript教程：根据HTML data-* 属性构建唯一数据集合 本教程将指导您如何利用JavaScript从HTML元素中提取自定义数据属性，并根据特定属性（如data-tab）将这些数据动态分组到结构化的JavaScript对象中。通过遍历DOM元素并智能地组织数据，您可以高效地将前端标记转换为可操作的数据集合，适用于各种数据处理和展示场景。
2025-11-13 15:44:29
419
使用 setInterval 和 CSS 类实现网页元素周期性切换显示 本教程详细介绍了如何利用JavaScript的setInterval函数与CSS类结合，实现网页元素在不同状态（显示/隐藏）之间周期性切换的动态效果。通过将元素的可见性管理封装在CSS类中，并借助classList.toggle()方法，可以创建出高效且易于维护的交互式用户界面。
2025-11-13 15:41:28
816
React与TailwindCSS：实现页面跳转与链接样式化指南 本文旨在指导开发者如何在React与TailwindCSS项目中正确实现页面跳转功能，并对链接进行样式化。我们将探讨HTML标签的基本用法，如何利用TailwindCSS的实用工具类为链接添加视觉样式，以及在React单页应用中客户端路由库（如react-router-dom）的重要性，从而确保链接既功能完善又美观。
2025-11-13 15:40:11
851
使用Python抓取静态URL分页数据的策略 当网页的URL在切换页面时保持不变，传统的基于URL参数递增的爬取方法将失效。本文将详细介绍如何识别并利用POST请求及其携带的表单数据来模拟分页操作，从而成功抓取这类动态加载的数据。我们将使用requests库发送POST请求，结合BeautifulSoup进行HTML解析，并最终利用pandas整理数据，实现高效、稳定的多页数据抓取。
2025-11-13 15:36:56
543
JavaScript实现点击按钮显示隐藏元素：DOM操作与事件监听指南 本教程详细阐述如何利用JavaScript和DOM操作实现网页元素的动态显示与隐藏。通过点击按钮触发事件，我们学习如何精准选择目标元素，并修改其CSS属性来控制可见性，同时探讨了内联与分离式事件处理的最佳实践，以及提升代码可维护性的方法。
2025-11-13 15:36:02
594
JavaScript事件委托：高效捕获页面输入框焦点事件 本文旨在提供一种高效且灵活的方法，以在不依赖addEventListener循环绑定或修改HTML属性的情况下，检测页面上所有HTML输入元素的焦点事件。通过利用事件委托机制，在document对象上注册单个捕获阶段的事件监听器，可以有效解决性能开销和动态元素更新的挑战，实现对焦点、点击等事件的统一管理。
2025-11-13 15:31:12
1001
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部