CSS塊元素div元素

之間產生的間隙我有困難的div塊之間的空間：CSS塊元素div元素

<div id="maincontentwrapper" > 
    <img src="images/content-top.png" alt="main content border image" border="1" /> 
    <div id="maincontent" > 
    <div id="pagecontent"> 
     <h1>Mission Statement</h1> 
    </div> 
    </div> 
    <img src="images/content-bottom.png" alt="main content border image" /> 
</div>

這是創建一個頁面一個完整的邊框的圖像。一切都很好，但只要我在頁面內容中輸入塊級元素，例如如圖所示，然後在content-top.png圖像和maincontent div之間出現間隙。

如果我將第一個字符改爲內聯，例如一個沒有突破性的空間或簡單的字母，那麼差距就不會出現。

這是（相關）CSS：

img { 
margin: 0; 
padding: 0; 
} 
#maincontentwrapper { 
} 
#maincontent { 
background-image: url('../../images/content-main.png'); 
background-repeat: repeat-y; 
min-height: 300px; 
width: 757px; 
} 
#pagecontent { 
width: 625px; 
margin-left: auto; 
margin-right: auto; 
}

感謝所有幫助

來源

2010-08-04 neil

alt =「主要內容邊框圖像」？真的嗎？現在就去閱讀http://www.alanflavell.org.uk/alt/alt-text.html！ – Quentin 2010-08-04 22:35:38

這是一分鐘的HTML案例:) – neil 2010-08-06 19:58:03

這也可能是默認瀏覽器應用的餘量。試試你的代碼

h1 { margin: 0; }

添加到CSS。這有幫助嗎？

（該h1元素並不是唯一的塊級元素，從這個以「吃虧」，p在大多數瀏覽器都有默認的利潤了。）

如果你很確定你的客戶端瀏覽器將支持CSS3，你有一個備份機制，或者你根本不關心，你可以做

.maincontent :first-child, .maincontent :first-child :first-child { 
    margin: 0; 
}

將第一個孩子的邊距設置爲0，無論元素的類型。

你還有其他的東西可能 do是應用"reset stylesheet"，通過用零掩蓋它們來取消瀏覽器的默認設置。但是，我不建議你這樣做，因爲瀏覽器的默認設置大部分時間都是有意義的，重置它們都可能導致干擾效果。

來源

2010-08-04 22:28:50 MvanGeest

+1用於解釋爲什麼'reset.css'是不好的做法。 – You 2010-08-04 22:58:43

修復它。謝謝。我想我需要了解更多關於盒子模型的內容，因爲我認爲它只是在div塊中的頭部添加一個邊距而不是外部塊。它看起來很糟糕的原因是我有一個身體的背景，頭上的邊緣是在整個頁面上創建一個10像素的白色塊。 – neil 2010-08-05 01:46:54

我的意思是整個頁面有10個像素的間隙。有沒有比重置每個元素的邊距更好的方法？ – neil 2010-08-05 01:53:08

您是否嘗試過其他元素而不是H1？我相信這個問題來自於H1元素的默認利潤率，也許這就是「推低」div並留下一個缺口。順便說一句，您是否使用Firefox的插件Firebug來測試CSS？它非常強大，可以讓你隨時修改。

來源

2010-08-04 22:29:34 StevenGilligan

我會說這是一個問題，因爲瀏覽器的默認CSS設置，就像那些適用於H1 P等

一種方法來擺脫這些都是使用一些「重置」的CSS像在960grid：here

從我的經驗，它工作得很好:)

來源

2010-08-04 22:34:22

謝謝。如上所述，但我遇到的問題是如何最好地解決它以阻止其他元素，除了將所有內容都重置爲零邊距外。 – neil 2010-08-05 01:54:09

也許是因爲利潤率正在崩潰。嘗試添加

padding: 0 1px 0 1px;

給img或div或兩者。

來源

2010-08-04 22:43:24 jcubic

將頁邊距設置爲0，如上所述。但我想如何修復它任何其他元素？ – neil 2010-08-05 01:49:10

<img />標記默認呈現爲內聯。嘗試display: block。

來源

2013-08-14 09:21:11 antonagestam

CSS塊元素div元素

回答

相關問題