logo标签列表

如何删除 div 标签之间的不可见空格

htmlcss
10

我已经建立了多个网站，现在我遇到了一个让我抓狂的新手问题...

这是我的代码：

<body>
<div id="page">
<div id="page_wrapper">

    <div id="header">
        <h1>Heading 1</h1>
    <div class="clear_both" />&nbsp;</div>
    </div><!-- end #header --> 

    <div id="main_menu">
        <p>Here goes the main menu</p>
    <div class="clear_both" />&nbsp;</div>
    </div><!-- end #main_menu --> 

    <div id="left">
    </div><!-- end #left --> 

这是我的CSS代码：

首先，我使用了这里的CSS重置模板： http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css

然后在另一个文件中：

body, html {
    font: 10pt Verdana,Arial,sans-serif;
    background: #fff;
    margin: 0;
    padding: 0;
    text-align: left;
    color: #333;
}
div {
    line-height: 1.4em;
}
#page {

}
#page_wrapper {

}
#main_menu {

}
#left {

}
div.clear_both {
    margin: 0;
    padding: 0;
    font-size: 0;
    height: 0;
    line-height: 0;
    clear: both;
}

以下链接是一个屏幕截图，你可以看到输出结果...(我正在本地服务器上操作)

在我的div标签之间有一个无法解释的空格，我无法去掉它，这让我非常苦恼...请问有谁能告诉我如何去掉它？ 我尝试过添加负的顶部边距，但从以前的经验来看这不是解决方法...通常将margin和padding设置为0就足够了...但现在情况似乎有所不同:S

输入图像描述

无法解释的DIV空格

1
通常我会使用<br style="clear: both;"/>来实现你想要的效果，但我不确定你是否需要它。另外，我也不太清楚你所指的空间是什么？ - Jared Farrish
如果我认为这是解决方案，我会将其发布为答案。 :) 您不需要使用编码空格的DIV来实现这一点，因此可以通过使用BR来简化它。如果您发布一个http://jsfiddle.net/，展示了您正在使用的完整css / html的问题，那么它将更有用。 - Jared Farrish
我更喜欢在父容器上使用overflow: hidden或overflow: visible，而不是在各个地方使用clear: both元素。这几乎可以在您需要清除div的任何地方起作用。 - deceze
@deceze - 这是一个有趣的方法。它如何实现clear的功能？ - Jared Farrish
@Jared 父容器默认情况下不会自动增长以适应浮动元素的高度，这通常需要使用清除元素。设置overflow值会触发容器评估是否需要隐藏某些内容或显示滚动条等。如果没有其他限制其高度的因素，那么它将在决定隐藏内容之前尽可能地扩大自己。这就是技术上的解释... - deceze
显示剩余5条评论
7个回答
12

多亏了所有人的帮助，特别是Notepad++，我终于找到了问题。

问题是由于不可见的空格（来自SPACE键）引起的。 我不知道为什么，但据我所知，这是浏览器首次检测到多个空格按键。我猜测现在较新的浏览器正在注册连续的空格。

我只需用Notepad++打开html脚本并设置从查看 -> 显示符号 -> 显示所有字符。 然后我删除了所有不必要的空格，问题就解决了。

7
div {line-height: 1;}
h1, p {margin: 0;}

不要为您的行高使用单位，请参见：无单位行高 以获取更多信息， 如果您只是输入 1.4，则行高将为 1.4 x 字体大小，这应该有助于控制间隙，显然，我上面的代码示例将全部清零，仅供参考。 JSFiddle: 在此处。
是的，没错，我刚刚添加了一个小工具来展示这两个代码片段的工作原理，没有重置。我知道重置应该重置边距，但也许我们看不到的代码正在重新添加一些内容？或者重置是问题所在，因为我们无法测试整个页面，所以我只是从基础开始。 - clairesuzy
我已经完全删除了那些div标签：<div class="clear_both" /> </div> 所以现在我的代码看起来像这样：<body> <div id="page"> <div id="page_wrapper"> <div id="header"> <h1>标题1</h1> </div><!-- end #header -->  <div id="main_menu"> <p>这里是主菜单</p> </div><!-- end #main_menu -->  <div id="left"> </div><!-- end #left -->  但是间隙仍然存在...这是我现在代码的截图： http://makedonskarabota.com/gallery/div2.png - Spirit
@Spirit，div#main_menu的CSS是什么？我们需要更多你实际使用的CSS，比如一个可以放在你的html.css和style.css中的JSFiddle.net示例，并粘贴你的HTML并使用“normalise css”复选框进行重置。我认为你有两个重置 - 一个是HTML5的？ - clairesuzy
好的...这里是你告诉我要做的示例：http://jsfiddle.net/m54Ce/。整个代码...在CSS字段中，首先是CSS重置，然后是我的CSS...... 在http://jsfiddle.net上看起来不错...但在我的本地，它仍然像截图上那样糟糕...我感到绝望.. :'( - Spirit
请问有没有人可以将我之前的评论（在上面）发布为答案，这样任何遇到类似问题的人都可以避免像这样的挫败感 :) ..我是一个新用户，至少需要8小时才能将其发布为问题的答案..谢谢 :) - Spirit
显示剩余5条评论
4
在你的CSS文件顶部粘贴以下内容：

* { margin: 0; padding: 0; }

希望这能帮到你。
3
我不想唠叨（特别是考虑到这是你在 Stack Overflow 上的第一个答案），但这真的不是一个干净利落的解决方案，如果它真的算得上是解决方案的话。这将相当于使用核弹来消灭一只果蝇的 CSS 版本。 - posdef
@posdef 这不是对问题的回答，但如果您想要删除所有元素的边距/填充（除非另有规定），那么这是完美优雅的。特定的CSS规则仍然会优先生效。 - Rob
一个不好的解决方案。这将影响文档中所有样式。标题、列表、正文等等。应该避免这种情况，只有导致不良外观的元素才应该采用这种方式进行样式设置。 - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
据OP所说，YUI重置已经处理了重置问题。可能比这个“reset-too-many-things”更好。 - FelipeAls
1
<div class="clear_both" />&nbsp;</div>

这会在标题1和主菜单之间创建一个空白...

如果您将它们设置为"display: block"，则DIV将依次排列，因此即使此DIV没有文本，它也有空白" "...

如果您删除它，其他所有内容都将像下面的文本一样...

如果我理解错了，请谅解... ;)

请删除我在帖子中提到的这个div，并添加具有id header style="line-height: 1em;"的div，如果您想要更小的间距，甚至可以使用更小的尺寸... - SharkTheDark
0

div {line-height: 1.4em;} 应该是罪魁祸首。

0

在你的DIV或图像上使用：

.div
{
display: inline-block;
padding:0;
margin:0;
}

并在 body 中使用：

body
{
padding:0;
margin:0;
}

我之前也遇到了同样的问题，这个方法对我非常有效，我已经解决了！希望能帮助到需要答案的人。

0
标签在使用时会带有空格。 为了去除它们
请使用
margin-top: -10px

或者根据您的页面设置选择方便的方式。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接