DIVS之间的水平空白区域

我一直在尝试构建一个非常简单的布局，其中所有内容都垂直流动，但只要向其中一个div添加任何内容，它就会在它下面的div之间创建空白区域。DIVS之间的水平空白区域

下面是一个例子的影像图：http://chriswebbonline.com/imagelinks/help.jpg

这里是我的HTML

<body> 

<div id="container"> 

<div id="header"> 
<p>&nbsp;</p> 
</div> 

<div id="chat"> 
<p>.</p> 
</div> 

<div id="footer"> 
<p>.</p> 
</div> 

</div> 
</body>

这里是我的CSS

body { 
    background-color:#777; 
    font-family:Verdana, Geneva, sans-serif; 
} 

#container { 
    width:100%; 
    } 

#header { 
    text-align:center; 
    background-color:#000; 
    color:#FFF; 
    } 

#chat { 
    background-color:#EEE; 
     } 

#footer { 
    background-color:#000; 
    }

我想知道如何从停止空白自动出现。

〜克里斯

来源

2014-02-23 chriswebbonline

我很确定你的'p'边缘正在流出'div's。如果将'p'改为像span这样的内联元素，或者如果将'p'元素的'margin'设置为'0'，会发生什么？ – ajp15243

这已解决，谢谢！我开始使用Dreamweaver，并且一直使用记事本。看来Dreamweaver自动添加了p标签。 – chriswebbonline

Dreamweaver倾向于做刺激或反规范的事情。我会建议坚持与别的东西。如果你想加强文本编辑器，那么[Notepad ++]（http://notepad-plus-plus.org/）或[Sublime Text]（http://www.sublimetext.com/）是很好的选择。两者都有语法突出显示许多不同的代码语言，包括网页语言。对于功能丰富的IDE，三种主要的Java IDE都具有不错的到卓越的Web支持：[IntelliJ]（http://www.jetbrains.com/idea/），[Eclipse]（https://www.eclipse.org /）和[NetBeans]（https://netbeans.org/）。所有这些都是免费的！ – ajp15243

-1

只是一种预感，但尝试：

<div id="header"> 
<p>&nbsp;</p> 
</div><div id="chat"> 
<p>.</p> 
</div><div id="footer"> 
<p>.</p> 
</div>

（开始和结束标记之间没有空格）

来源

2014-02-23 05:17:55 crunch

尝试

p { 
    margin : 0; 
}

段落标记保证金默认情况下不是0 0

来源

2014-02-23 05:18:37 Prakash

就像一个魅力:) – chriswebbonline

如果这真的帮助你，请把它标记为正确的答案。谢谢。 – Prakash

DIVS之间的水平空白区域

回答

相关问题