爲什麼在CSS保證金不適合DIV正常工作

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="calendar.css"> 
</head> 
<body> 
<div class="textAreaWrapper"> 
<div class="textAreaWrapperPanel"> 
<h3 class='textblockheader'>Text Block Settings</h3> 
</div> 
</div> 
</body> 
</html>

這是我的HTML代碼中，下面是我的CSS代碼：爲什麼在CSS保證金不適合DIV正常工作

.textAreaWrapper{ 
    border: 1px solid black; 
    background-color: white; 

} 

.textAreaWrapperPanel{ 

    background-color : #093459; 
    color: white; 
    margin-top:0px; 

} 

.textblockheader{ 
    font-family : "Helvetica Neue,Helvetica,Arial,sans-serif"; 
    font-size: 16px; 
    font-weight : normal; 

}

我預計會有我textAreaWrapperPanel和textAreaWrapper格之間沒有空格元素，但相反，它仍然有。但如果我將textblockheader的保證金首頁更改爲0px，它的工作，任何人都可以解釋爲什麼會發生這種情況？

來源

2014-03-30 dramasea

這是因爲瀏覽器默認應用於H3元素（和其他元素）的邊距。 DEMO

所有你需要的是使用CSS重置

要快速查看一個醜陋的休息只是使用

*{margin:0; padding:0;} /* will apply to all (*) elements */

http://meyerweb.com/eric/tools/css/reset/
http://yuilibrary.com/yui/docs/cssreset/

關於你提到的有關 Collapsing Margins關注：
爲什麼H3的父級DIV的藍色背景不能完全覆蓋H3元素所佔用的空間？

那是因爲你是嵌套2個block-level元素：h3爲div，其中的盒模型和自然花車正在由瀏覽器來處理，除非像這樣三種解決方案規定：

將overflow:auto;設置爲父div
或將您的H3元素設置爲display: inline-block;
使用clearfix爲block-level父元素

jsBin PLAYGROUND

/* // uncomment 

*{margin:0;padding:0;} 

*/ 

.textAreaWrapper{ 
    border: 1px solid black; 
    background-color: white; 
} 

.textAreaWrapperPanel{ 
    /* overflow:auto; */   /* Uncomment this or */ 
    background-color : #093459; 
    color: white; 
} 

.textblockheader{ 
    /* display:inline-block; */ /* ... this one or ...*/ 
    font-family : "Helvetica Neue,Helvetica,Arial,sans-serif"; 
    font-size: 16px; 
    font-weight : normal; 
} 

/* add this class to your DIV .textAreaWrapperPanel */ 
.clearfix:before, 
.clearfix:after { 
    content:" "; 
    display:table; 
} 
.clearfix:after { 
    clear:both; 
}

微clearfix資源：http://nicolasgallagher.com/micro-clearfix-hack/

來源

2014-03-30 16:42:59

你打我給它+1 – LOTUSMS

但爲什麼textAreaWrapperPanel的藍色似乎是應用到H3不僅是因爲我期望的是藍色應該覆蓋「頂部」部分，因爲它沒有邊距和填充 – dramasea

@dramasea您是否使用'overflow：auto;'爲您的'.textAreaWrapperPanel'嘗試過？ –

我覺得你的問題是，他們已經在介於0空間？兩個div都具有相同的背景顏色，內部沒有邊框。試着讓內在的一個不同的顏色看看。我敢打賭它沒有上限。這只是你的H3標籤，默認情況下有保證金。編輯：對不起，我誤解你的代碼。你是對的，他們是不同的顏色。這是爲什麼發生了什麼。您的H3元素默認呈現爲BLOCK級元素。這會導致它將自己的背景邊距設置爲10px頂部和底部。如果你想告訴你的H3類textblockheader：

display: inline;

它會導致它刪除背景區域和邊界，而無需重置任何東西。由於兩個div彼此接觸，但textblockheader類中的白色邊距會增加額外的空間，以獲得默認的白色邊緣顏色。

但是，是這樣做的原因是H3元素的默認CSS樣式作爲具有默認頂部和底部邊距的塊級元素。

來源

2014-03-30 16:45:05 sage88

內部div實際上有不同的顏色 - >藍色，如果h3默認有一個邊距，爲什麼頂部還有空白內部div的？ – dramasea

@dramasea看起來你是對的，抱歉沒有像我應該那樣仔細閱讀你的CSS。據此編輯。 – sage88

謝謝，是否有任何關於保證金接觸對方的部分，所以我可以知道更多？ – dramasea

標題標籤具有默認邊距。此鏈接可以幫助：Default Heading Styles

而且重置標籤的默認CSS值可能避免今後發生類似的錯誤：Reset CSS

來源

2014-03-30 16:47:59 Pazza22

爲什麼在CSS保證金不適合DIV正常工作

回答

相關問題