【转】为什么我的DIV块前总有空隙？

最新推荐文章于 2022-06-16 21:49:57 发布
最新推荐文章于 2022-06-16 21:49:57 发布
阅读量168 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： php 开发工具
原文链接：http://www.cnblogs.com/pinocchioatbeijing/p/3949832.html
博主在网站项目中，遇到DIV嵌套出现空隙的问题。用Firebug查看内外层DIV相关属性均为0，右键查看源代码也无异常。后发现是BOM文件头所致，内层DIV通过PHP的include命令引入，该PHP文件为utf - 8格式，用VIM命令:set nobomb解决问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在做网站项目时，博主爱吾所爱（爱生活=爱技术）很偶然地碰到一个奇怪的事情。我的DIV嵌套在另一个DIV里，总是出现这样一行空隙：
QQ图片20140830204842
Firebug查看内外两层DIV的margin, padding, line-height所有可能的东西，也都是0。
QQ图片20140830204912
右键查看源代码，并没有什么异常。
QQ截图20140830205829
狐狸的尾巴总会露出来。再用Firebug试着编辑外层DIV的时候，出现下面的情况：
QQ图片20140830205902
一看，其中有一个&#65279，马上用计算器计算，十六进制就是FEFF，这不就是大名鼎鼎的BOM文件头吗？
于是马上在网上检索之，得到http://7567567.blog.51cto.com/706378/641744中的办法。原来我的内层DIV是通 过php的include命令进去的，而这个php文件刚好是utf-8的，应该就是它了！果断用VIM命令:set nobomb解决，重新上传，问题就OK了。

原文网址：http://www.loverecorder.com/?p=30

转载于:https://www.cnblogs.com/pinocchioatbeijing/p/3949832.html

【前端】消除div排列的空隙
JellyFishDing的博客
02-22 613
遇到的问题 大作业要实现这样的一个布局效果 当时css设置是这样的（选择器就简单写1，2，3了）： 1 { display: inline-block; width: 50%; height: 50%; } 2 { display: inline-block; width: 50%; height: 50%; } 3 { width: 100%; height: 50%; }...
HTML/CSS 两个div块之间有缝隙
志在四方csj的博客
08-21 1480
问题描述： 项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述：同一个块内的input文本框与span标签，显示出来有缝隙 @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, ...
div之间有间隙以及img和div之间有间隙的原因及解决方法
10年职场两茫茫，35岁凄凉奈若何
05-27 205
div之间有间隙以及img和div之间有间隙的原因及解决方法
两个div之间没设间距，却多出来一段空白。。。
deideidei13的博客
09-05 4242
两个div没加margin 和padding但还是有间距，控制台审查元素也没发现有占宽度的 <div class="search"> <form action="" method="get"> <input type="text" name="searchCity" value="请输入旅游景点或城市&
在div里插入元素会有空白,终于解决了!!!!!!!
HN-XX-PYY的博客
04-02 1093
在div里插入元素会有空白,终于解决了!!! 先看错误演示： 这是正确格式的代码： <div class="others-talk-span textMax"><text>${tR.content }</text></div> 下面这是错误格式的代码： <div class="oneself-talk-span self-span oneselfTextMax"> <text>${tR.content }</tex
怎样解决表单元素的前后有一大块空白的问题
axl19530209的专栏
02-10 1302
怎样解决表单元素的前后有一大块空白的问题，为什么表单元素的前后有一大块空白？解决思路：因为表单元素form是默认外补白margin属性不为0的块元素，所以要解决问题有两个方法，定义块元素为行内元素，或者设置CSS对象的margin属性为0。 　　为什么表单元素的前后有一大块空白？ 　　解决思路： 　　因为表单元素form是默认外补白margin属性不为0的块元素，所以要解决问题有两个方法
【HTML】 div并排显示无空隙（占满显示屏）+等距排列
weixin_44512370的博客
08-22 4222
最终效果 代码基于浏览器的页面大小进行布局，实现div撑满整个屏幕的近似效果，但在实际操作中需要考虑更多的因素，来达到撑满显示屏的效果。 最终代码 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="height:100%"> <head> <meta charset="utf-8" /> <title>div in line&l
css学习（三）多行文本的垂直居中和 img 与 div 存在空隙的解决
prdslf001001的博客
08-02 415
一、多行文本的垂直居中几种实现方式： 1、近似居中： <div class="wrap"> <p>中国专业IT社区优快云 (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。</p> </div> *{...
【前端面试必知】行内块元素之间的空白间隔是什么原因引起的
weixin_44337386的博客
06-16 885
本系列主要整理前端面试中需要掌握的知识点。本节介绍行内块元素之间的空白间隔是什么原因引起的。
块与块排版有缝隙解决方案
yck0ng的博客
07-25 723
实现块与块排版有缝隙解决办法汇总 在display属性实现块之间的布局时候会发现，设置的两个块之间有缝隙。 基础代码：     http-equiv="Content-Type" content="text/html; charset=utf-8"/>          type="text/css">         .container{             width
DIV标签里自带空格
胡图图的博客
01-12 3390
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ background: #E9E8E8; } div{ width: 300px; height: 28px; } input[t
HTML/CSS 有时两个div接合处会出现缝隙的解决方法
热门推荐
CJFAN_yo的博客
11-13 2万+
写一个网页时突然发现两个本该紧密接触的div（margin，padding均为0，）之间忽然出现了一条小白缝，如图： 咳咳，虽然有点小，但还是很扎眼。 经过检查，发现使用float：left时两个div之间只要相邻的边有一条的border 自定义设为0，就会出现缝隙。 也就是上图div1的右border和div2的左border中，有一个为0px就会出现缝隙。 注意了，不加任
在一个父级div元素下，有2个子div，现在需要将这2个div并排展示，如何设置
最新发布
07-27
<think>我们被要求使用CSS将两个子div水平排列在一个父级div容器中。根据提供的引用，有几种方法可以实现。 方法1：使用Flex布局（引用[1]） 在父容器上设置display: flex;，这样子元素会自动水平排列（默认方向是row）。如果希望两个子div在父容器中水平居中，可以设置justify-content: center;。但注意，问题只是要求水平排列，不一定是居中。所以根据需求调整。 方法2：使用inline-block（引用[2]和引用[3]） 将子div设置为display: inline-block;，然后通过父容器设置text-align: center;（如果希望居中）或text-align: left;（默认左对齐）来实现水平排列。 方法3：使用表格布局（引用[3]提到table-cell） 将父容器设置为display: table;，子容器设置为display: table-cell;，这样也可以水平排列，但注意表格布局会使子元素等宽，并且可能不适合需要灵活宽度的场景。 根据问题，我们只需要水平排列，所以可以选择最简单的方法。这里推荐使用Flex布局，因为它更现代且易于控制。 步骤： 1. 创建一个父div，设置其display属性为flex。 2. 在父div内放置两个子div。 注意：默认情况下，子div会水平排列，并且高度相同（由最高的子div决定）。宽度默认是内容宽度，如果希望子div平均分配宽度，可以设置flex:1。 示例代码： 如果我们不需要特别的对齐，只需要水平排列，那么可以这样： ```html <!DOCTYPE html> <html> <head> <style> .parent { display: flex; /* 启用flex布局 */ /* 可选：设置父容器的其他样式，如边框、背景色等 */ border: 1px solid black; padding: 10px; } .child { /* 设置子div的样式，比如间距 */ margin: 5px; padding: 10px; border: 1px solid blue; /* 如果希望两个子div宽度相等，可以设置flex:1 */ flex: 1; } </style> </head> <body> <div class="parent"> <div class="child">子元素1</div> <div class="child">子元素2</div> </div> </body> </html> ``` 在上面的代码中，我们给父div设置了`display: flex;`，两个子div就会水平排列。同时，我们给子div设置了`flex:1`，这样它们会平分父容器的宽度（减去margin和padding等）。如果不需要等宽，可以去掉flex:1，那么子div的宽度将由内容决定。 另外，如果希望子div之间有一定的间距，可以使用margin，如示例中的margin:5px。 如果希望子div在父容器中水平居中，可以给父容器添加`justify-content: center;`。但注意，这样设置后，子div会居中排列，并且不会自动占满父容器（即不会拉伸）。如果同时需要居中且等宽，那么可以设置父容器为`justify-content: center;`，并且子div不设置flex:1（或者设置一个固定的宽度）。 另一种情况：如果希望两个子div靠右排列，可以设置父容器的`justify-content: flex-end;`。 根据问题，我们只需要水平排列，所以上述代码已经满足。 但是，如果用户希望两个子div不要等宽，而是根据内容自适应，那么可以去掉子div的flex:1，然后设置`display: flex;`后，默认就是从左到右排列，宽度由内容决定。 修改后的代码（不等宽）： ```html <style> .parent { display: flex; border: 1px solid black; padding: 10px; } .child { margin: 5px; padding: 10px; border: 1px solid blue; /* 去掉flex:1，宽度由内容决定 */ } </style> ``` 这样两个子div的宽度就由各自的内容决定了。 另外，引用[2]中使用了inline-block的方法，我们也可以给出示例： ```html <style> .parent { text-align: center; /* 使子元素在父容器中水平居中，如果不需要居中，可以设置为left */ /* 注意：使用inline-block时，父容器需要设置宽度，否则默认100%，居中效果明显 */ width: 100%; /* 或者指定宽度 */ } .child { display: inline-block; margin: 5px; padding: 10px; border: 1px solid blue; /* 如果需要子div宽度自适应内容，则不需要设置宽度 */ } </style> <div class="parent"> <div class="child">子元素1</div> <div class="child">子元素2</div> </div> ``` 注意：使用inline-block时，两个子div之间如果有空格或换行，会产生间隙。消除间隙的方法可以在父容器设置font-size:0，然后在子div上重新设置字体大小，或者将两个子div的标签写在同一行（不推荐，影响阅读）。 因此，更推荐使用Flex布局。 总结：使用Flex布局是最简单且灵活的方法。 根据要求，生成相关问题： §§相关问题§§ 1. 如何让水平排列的两个div在父容器中垂直居中？ 2. 使用Flex布局时，如何让其中一个子div占据剩余宽度？ 3. 如何解决使用inline-block布局时产生的元素间空隙？</think>### 使用 CSS 实现两个子 div 水平排列 在父容器中水平排列两个子 div，主要有以下三种常用方法： #### 方法 1：Flex 弹性布局（推荐） ```html <style> .parent { display: flex; /* 启用弹性布局 */ justify-content: center; /* 水平居中（可选）*/ gap: 20px; /* 子元素间距 */ border: 1px solid #ccc; padding: 20px; } .child { flex: 1; /* 平均分配宽度 */ min-height: 100px; background: #f0f0f0; border: 1px solid #999; } </style> <div class="parent"> <div class="child">子元素1</div> <div class="child">子元素2</div> </div> ``` **特点**： - 现代布局方案，代码简洁 - 自动处理间距和对齐 - 通过 `flex: 1` 使子元素等宽 - 支持响应式设计[^1] #### 方法 2：inline-block 行内块 ```html <style> .parent { text-align: center; /* 控制子元素水平对齐 */ font-size: 0; /* 消除HTML空格间隙 */ } .child { display: inline-block; width: 45%; /* 自定义宽度 */ margin: 0 2%; /* 间距控制 */ font-size: 16px; /* 重置字体大小 */ vertical-align: top; /* 顶部对齐 */ } </style> ``` **注意**： - 需设置 `font-size: 0` 消除 HTML 换行符产生的间隙 - 通过百分比 + margin 控制间距和宽度[^2] #### 方法 3：CSS Grid 网格布局 ```html <style> .parent { display: grid; grid-template-columns: 1fr 1fr; /* 等宽两列 */ gap: 15px; } </style> ``` **特点**： - 适合复杂网格布局 - 精确控制行列间距 ### 关键差异对比 | 特性 | Flex | inline-block | Grid | |--------------|----------------|----------------|---------------| | 间距控制 | ✅ `gap`属性 | ❌ 需手动计算 | ✅ `gap`属性 | | 等宽效果 | ✅ `flex:1` | ❌ 需手动设置 | ✅ `1fr`单位 | | 垂直对齐 | ✅ `align-items`| ✅ `vertical-align`| ✅ 内置对齐 | | 旧浏览器支持 | IE10+ | IE8+ | IE11+ | > 💡 **实践建议**：优先使用 Flex 布局，它能处理大多数水平排列场景。若需支持 IE8-9，可选用 inline-block 方案[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值