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之間的水平空白區域

回答

相關問題