开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么在我的div中设置了高度和宽度为0后，里面有一个奇怪的空格？

在设置div的高度和宽度为0后，出现奇怪的空格可能是由于以下原因之一：

盒模型的影响：在CSS中，每个元素都有一个盒模型，包括内容区域、内边距、边框和外边距。当设置div的高度和宽度为0时，实际上只是将内容区域的高度和宽度设置为0，而内边距、边框和外边距仍然存在。这可能导致看起来像是有一个空格的现象。解决方法是将内边距和边框设置为0，并使用CSS的reset样式来清除默认的外边距。
文字空间的影响：如果在div中存在文本内容，即使设置了高度和宽度为0，文字仍然会占据空间。这是因为文字具有默认的行高和字体大小。解决方法是将文本内容移除或者设置字体大小为0。
浮动元素的影响：如果div中包含浮动元素，浮动元素可能会超出div的边界，导致看起来像是有一个空格。解决方法是在div中添加一个清除浮动的样式，例如使用clearfix类或者设置div的overflow属性为auto或hidden。

总结起来，为了完全消除div中的奇怪空格，可以采取以下措施：

设置div的高度和宽度为0。
清除盒模型的内边距和边框。
移除或隐藏文本内容。
清除浮动元素。

腾讯云相关产品和产品介绍链接地址：

腾讯云CSS：https://cloud.tencent.com/product/css
腾讯云CDN：https://cloud.tencent.com/product/cdn
腾讯云云服务器：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储COS：https://cloud.tencent.com/product/cos
腾讯云人工智能：https://cloud.tencent.com/product/ai

相关搜索:在react .Also中未应用柱形图的“选项”我需要将宽度和高度设置为100%的div 我可以在宽度和高度为0的div上使用圆形方框阴影吗 js cst gmt如何转换 js 判断不同意协议不能注册 js 正则表达式校验字节长度 js canvas 图片旋转 converse.js 配置 js动态页签tab可删除增加 js 判断是否金额两位小数 js中怎么清除session

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

工作中碰到的js问题（disabled表单元素不能提交到服务器）

几经周折，终于找到了原因，原来我在提交表单的时候，name = "phone"这个标签此时在一个javascript事件中被禁用了，即完整的该标签状态为： <input type="text" name...=img.height+75; 这段代码在IE/Firefox浏览器中，是能够获取到img对象的宽度和高度，但是在谷歌浏览器中获取宽高的值为0px。　　...应该是这段代码，在谷歌浏览器中图片还没加载完，此时获取图片的宽度和高度自然是0px。...IE/Firefox，还是在Google浏览器中，都可以获取图片对象的宽高了 2、想实现一个功能，页面有一个div区域，需要做到点击这个div区域外的其他地方，关闭这个div区域。...;　　　　//该div的宽度 var height = obj.offsetHeight;　　//该div的高度　　　　　　　　　　　　　　 //判断鼠标坐标是否在div区域之内

1.9K2 0

灵异留白事件——图片下方无故留白

在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，我称之为“幽灵空白节点”。...还是上面的图片下边缘留空隙的例子，实际上，这种行为表现，就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。...啊，是可以的。怎么搞？很简单，font-size:0, 因此此时content area高度是0，各种乱七八糟的线都在高度为0的这条线上，绝对中心线和中线重合。...下面我们要做一件很有必要的事情，用来帮助我们理解上面复杂例子在line-height值为0后的表现，什么事情呢？...哈，同境界模拟，我们也设置框框2的line-height值为0，于是，就会是下面这样的表现： x-baseline 知道框框2为何又下沉了一点吗？

1.7K2 0

CSS中的vertical-align跟line-height相互作用

在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，我称之为“幽灵空白节点”。...还是上面的图片下边缘留空隙的例子，实际上，这种行为表现，就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。...啊，是可以的。怎么搞？很简单，font-size:0, 因此此时content area高度是0，各种乱七八糟的线都在高度为0的这条线上，绝对中心线和中线重合。...下面我们要做一件很有必要的事情，用来帮助我们理解上面复杂例子在line-height值为0后的表现，什么事情呢？...哈，同境界模拟，我们也设置框框2的line-height值为0，于是，就会是下面这样的表现： x-baseline 知道框框2为何又下沉了一点吗？ ?

8581 0

50道 CSS 经典面试题（包含答案）

首先，需要把元素的宽度、高度设为0。然后设置边框样式。...*{margin:0;padding:0;} IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。...;/*IE6识别*/ } 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。...行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度外层div使用position：relative；高度要求自适应的div使用position: absolute

9493 0

50道CSS基础面试题

首先，需要把元素的宽度、高度设为0。然后设置边框样式。...*{margin:0;padding:0;} IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。...;/*IE6识别*/ } 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。...行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度外层div使用position：relative；高度要求自适应的div使用position: absolute

1.5K5 0

50道CSS面试题（附答案）

首先，需要把元素的宽度、高度设为0。然后设置边框样式。...*{margin:0;padding:0;} IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。...;/*IE6识别*/} 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。...行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度外层div使用position：relative；高度要求自适应的div使用position: absolute

1.5K3 0

Web程序员们，你准备好迎接HTML5了吗？

参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。　　...这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 ...设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。...参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。...11.为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？

7742 0

网页设计中另人头疼的浏览器兼容问题

参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。　　...这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 ...设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。...参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。...11.为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？

1.4K2 0

面试必备 css面试必考点

*{margin:0;padding:0;} IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。...;/*IE6识别*/ } 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。...在不同浏览器下以后什么区别？当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。...行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度外层div使用position：relative；高度要求自适应的div使用position: absolute

1.1K1 0

小结CSS的float属性

3.浮动引发的问题 3.1破坏性这个在我的上一篇文章小结BFC的基本知识与应用中也提过：如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷。...而如果给div元素增加设置了float，看起来这个div元素会变得紧凑，宽度就是能把内容包裹住的宽度，例如：包裹性.png 3.3 其他问题被设置了float的元素会脱离文档流，效果是布局时看起来是会尽量往一边靠拢...例如下面三个是正常的三个img图片，可以看到每个图片之间是有空格的：有空格.png 而如果给img图片设置了float属性，就会看到图片直接没有空格了：清空格.png 3.4 老IE中的问题 IE6...快速修正：给浮动设置 display:inline; 而且不用担心，它依然是块级元素。 (3)3像素间距：挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。...快速修正：在受影响的文本上设置宽度或高度。 (4)IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。

5.1K140 2

小结CSS的float属性

3.浮动引发的问题 3.1破坏性这个在我的一篇文章小结BFC的基本知识与应用中也提过：如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷。...3.2包裹性我们都知道，div元素是块级元素，会占据一行。而如果给div元素增加设置了float，看起来这个div元素会变得紧凑，宽度就是能把内容包裹住的宽度，例如： ?...3.3 其他问题被设置了float的元素会脱离文档流，效果是布局时看起来是会尽量往一边靠拢，空格、换行这些都和该元素没关系了。...例如下面三个是正常的三个img图片，可以看到每个图片之间是有空格的： ? 而如果给img图片设置了float属性，就会看到图片直接没有空格了： ?...快速修正：在受影响的文本上设置宽度或高度。 (4)IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。

1.2K5 0

【云+社区年度征文】2020一网打尽CSS世界

>helloworld 包含块：如上述标签幽灵空白节点：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”，同时具有该元素的字体和行高属性的...;">xxx 说明：在Chrome下，第一、四个div的高度为30px（由于inline-block 形成了一个行框盒子，从而出现了幽灵空白节点，其受到字体行高属性影响...），第二、三个div的高度为0；内联元素中遇到的很多奇怪的问题都是由“struct”引起的内联元素与流字母x vertical-align的默认值就是基线，基线通常是指 x 的下边缘。...有了“幽灵空白节点”，`line-height` 就有了作用对象【 line-height影响行框的布局】，从而相当于span前面撑起了一个高度为36px的宽度为0的内联元素。...父级和第一个/最后一个子元素；空块级元素； margin合并的意义：在页面中任何地方嵌套或直接放入任何裸，都不会影响原来的块状布局。

5K1 1

【面试题】104道 CSS 面试题，助你查漏补缺（下）

[4] 56.overflow:scroll 时不能平滑滚动的问题怎么处理？[5] 57.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。...详细资料可以参考：《解决页面使用 overflow:scroll 在 iOS 上滑动卡顿的问题》[55] 57.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度...然后，重点来了，在每个 “行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。 81.vertical-align 的特殊性？...: #57有一个高度自适应的-div里面有两个-div一个高度-100px希望另一个填满剩下的高度 [7] 58.png、jpg、gif 这些图片格式解释一下，分别什么时候用。...iOS 上滑动卡顿的问题》: https://www.jianshu.com/p/1f4693d0ad2d [56] 《有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度

2.5K4 0

每天10个前端小知识【Day 15】

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。...清除浮动的方式：父级div定义height 最后一个浮动元素后加空div标签并添加样式clear:both。包含浮动元素的父标签添加样式overflow为hidden或auto。...所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px。...Box-sizing CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度。...回到上面的例子里，设置盒子为 border-box 模型。

891 0

前端常见技术点 - CSS DOM 布局（43问）

23、有一个高度自适应的 div，里面有两个 div，一个高度 100px，如何让另一个填满剩下的高度？...font-size 设置为 0； 3、设置 letter-spacing 为适当大小； 25、Z-Index 栈 Z-Index 只在设置了 position 属性（非 static）的元素上生效；父元素的...；半脱离文档流（元素脱离文档流，内容不脱离文档流，即一种文字环绕图片的效果）； absolute：元素默认宽度为内容宽度；脱离文档流；参照物为第一个定位祖先（设置了 position 并且值不是 static...的元素）/根元素；如果设置了 absolute 的元素没有设置宽高，则 LRTB 四个属性可以将该元素自适应抻开； fixed：元素默认宽度为内容宽度；脱离文档流；参照物为视窗； * float 会导致原有的...1ch 表示一个0字符的宽度，因此只有在等宽字体的情况下，我们才能用 ch 来精确的调整字符的显示。 ex：相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。

1.5K3 0

104道 CSS 面试题，助你查漏补缺（下）

[4] 56.overflow:scroll 时不能平滑滚动的问题怎么处理？[5] 57.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。...详细资料可以参考：《解决页面使用 overflow:scroll 在 iOS 上滑动卡顿的问题》[55] 57.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度...然后，重点来了，在每个 “行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。 81.vertical-align 的特殊性？...: #56overflowscroll-时不能平滑滚动的问题怎么处理 [6] 57.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。...iOS 上滑动卡顿的问题》: https://www.jianshu.com/p/1f4693d0ad2d [56] 《有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度

2.3K3 0

前端学习(13)~css学习(七)：浮动

也就是说：此时这个div不能设置宽度、高度；此时这个div可以和别人并排了。举例如下： ?...iv本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩浮动的补充（做网站时注意） ? 上图所示，将para1和para2设置为浮动，它们是div的儿子。...为了讲内墙法，我们先记住一句重要的话：一个父亲是不能被浮动的儿子撑出高度的。举例如下：（1）我们在一个div里放一个有宽高的p，效果如下：（很简单） ?...（2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了： ? （3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度： ?...我们设置一个height为 5px 、宽度为 200px的盒子，看下在IE 8和 IE 6中的显示效果： ?

8721 0

CSS入门13-单位详解

这些长度由数字和单位组成，数字和单位之间是没有空格的。长度单位的类型有两种：绝对长度单位和相对长度单位。 2. 绝对长度单位绝对长度单位的含义，就是客观上绝对存在的单位，放在任何地方都一样。...3.1.2-1 但是根部元素设置成rem或者使用默认大小不方便计算，所以一般将根部元素字体大小设置为100px。为什么不是10px呢，因为chrome下字体大小最小为12px。 <!...3.1.4 ch ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值。 IE8-不支持。 ch在实际中主要用于盲文排版。...3.2.3 vmin 布局视窗高度和宽度之间的最小值的 1/100 设置height: 100vmin;width: 100vmin;可以达到类似于contain的效果。...3.2.4 vmax 布局视窗高度和宽度之间的最大值的 1/100 设置height: 100vmax;width: 100vmax;可以达到类似于cover的效果。

6182 0

CSS常见样式（二）

第二种：在head部分加入: div{margin: 0;padding: 0;border:1px red solid;} 这种方法的使用情况要少的多...@import可以在CSS中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。 2.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?...，去除间隙方法：元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就没有了。...考虑到代码可读性，显然连成一行的写法是不可取的将inline-block元素的父元素设置font-size:0;然后在给设置了inline-block的元素重新设置一个font-size。...3、顶端对齐：将设置了inline-block的元素加上 vertical-align: top。 8.让一个元素“看不见”有几种方式？有什么区别？

7262 0

详解DOM对象中clientWidth、offsetWidth等属性

大家好，又见面了，我是你们的朋友全栈君。...clientWidth和clientHeight的计算方式是一样的，只不过一个为水平方向，一个为垂直方向，接下来我就只用clientWidth来说明情况。...的高度改为100px）：输出：三、offsetParent 也许你看到这里会觉得奇怪，怎么突然冒出个offsetParent出来，先别急，后面我要讲offsetTop和offsetLeft，因为这两个和...我们为上面代码的div#content添加一个子元素div#sub1 并添加样式（说明以下，div#sub-content的高度被我改成了50px）演示图如下可以知道，div#sub-content...，scrollWidth和scrollHeight还得在clientWidth和clientHeight的基础上加上内容层增加高度以及减去相应的滚动条宽度。

1.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭