如何讓CSS格邊距爲20px從DIV以上

Question

我有這樣的代碼：

https://jsfiddle.net/kc94aq33/

我想從的.header

底部有.wrapper頂邊距爲20px怎麼能我這樣做？

Answer 1

我已經更新了你的JS提琴，使用的代碼如下

.header { 
    width:550px; 
    margin:20px auto 20px auto; 
} 
.header:after{ 
    content: ''; 
    clear: both; 
    display: block; 
} 

當以往任何時候都使用的是浮動的容器，你應該總是使用clearfix

Answer 2

它打破的原因是因爲在CSS您的標題中的元素是浮動的左側和右側。如果所有元素都是浮動的左/右父容器（在這種情況下，標題）將摺疊到0px或元素的高度而不是浮動;有很多方法可以解決這個問題。

我更喜歡以下 - 可重複使用的方式。

創建一個類「clearfix」，您可以在具有浮動子元素的元素上重複使用該類。

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

.wrapper { 
    margin-top: 20px; 
} 

的 「clearfix」 類添加到Header元素，瞧！元素將「自我清楚」。

例如：

<div class="header clearfix"> 
    <div class="left"> 
     <img src="" width="240px" /> 
    </div> 

    <div class="right"> 
     <h1>Control Panel</h1> 
    </div> 
    </div> 

    <div class="wrapper"> 
    <div class="container"> 
     <h1 class="login_text"></h1> 
     <form>...</form> 
    </div> 
</div> 

Answer 3

unclose浮動元件的這種原因。 您可以添加CSS像這樣

.clear {clear:both;} .header {margin-bottom:20px;}

和你親密的div標籤後立即添加<div class="clear"></div>

"right"

我是更新您的提琴

https://jsfiddle.net/kc94aq33/2/