margin-top與#section div一起移動？

我正在嘗試將類別.column移動到50px以下，但margin-top: 50px與#section一起移動。爲什麼是這樣以及如何修復？margin-top與#section div一起移動？

*{ padding:0; margin:0; } 
 

 
body { width:100%; font-family:"Source Sans Pro" } 
 
#section { height:400px; background-color:#383838; color:White; } 
 
span { font-size:40px; } 
 
.column { width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px; }

<html> 
 
<head> 
 
    <title>Breadth</title> 
 
    <link rel="Stylesheet" type="text/css" href="breadth.css" /> 
 
    <link href="fonts.css" rel="stylesheet" type="text/css" /> 
 
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <div id="main"> 
 
     <div id="section"> 
 
      <div class="column"> 
 
       <span class="icon icon-cogs"></span> 
 
       <h2>Maecenas lectus sapien</h2> 
 
       <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-05-17 Sabari

您可以申請padding-top: 50px到#section而非margin-top到.column

從Mozilla的文檔參考：

如果沒有邊框，填充，直列內容或許可將塊的邊緣頂部與其第一個子塊的邊緣頂部或無邊框，填充，內聯內容，高度，最小高度或最大高度分開以將塊的邊距底部與最後一個孩子的邊緣底部，那麼這些邊際就會崩潰。摺疊後的保證金最終在家長之外。

閱讀關於Margin Collapsing瞭解更多詳情。

*{ padding:0; margin:0; } 
 

 
body{ width:100%; font-family:"Source Sans Pro" } 
 
#section{height:400px; background-color:#383838; color:White; padding-top: 50px; } 
 
span{ font-size:40px; } 
 
.column{ width: 300px; border: 2px solid yellow; margin-left:40px;}

<html> 
 
<head> 
 
    <title>Breadth</title> 
 
    <link rel="Stylesheet" type="text/css" href="breadth.css" /> 
 
    <link href="fonts.css" rel="stylesheet" type="text/css" /> 
 
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <div id="main"> 
 
     <div id="section"> 
 
      <div class="column"> 
 
       <span class="icon icon-cogs"></span> 
 
       <h2>Maecenas lectus sapien</h2> 
 
       <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-05-17 07:47:34

我需要知道爲什麼邊距是不工作... @穆罕默德 – Sabari

我分享了一個鏈接PLZ讀它，它的崩潰邊緣的BCZ –

@Sabari如果你真的想要堅持'margin-top'，然後將'overflow：hidden'應用於'＃section'並且它會起作用 –

如果你想使用margin-top然後給display:block於母公司的股利和display:inline-block兒童格。

見here

富勒更多信息閱讀here

編輯CSS

* {填充：0;餘量：0; }

body{ width:100%; font-family:"Source Sans Pro" } 
#section{height:400px; background-color:#383838; color:White;display:block; } 
span{ font-size:40px; } 
.column{ width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px;display:inline-block;}

來源

2016-05-17 07:53:56

您應該使用padding-top爲#section像小提琴和從子刪除margin-top。由於margin會彼此倒塌，因此最好不要將它用於定位元素。是指這樣的：Margin goes outside div when border is removed

#section { 
    padding-top: 40px; 
    ... 
}

另一種方法是使用相同的代碼，但添加overflow:auto到#section這樣的：

#section { 
    overflow:auto; 
    ... 
}

還有另一種解決方案太喜歡使用於母公司的邊界，但這些更像是黑客因爲我們使用利潤率進行定位。

*{ padding:0; margin:0; } 
 

 
body { width:100%; font-family:"Source Sans Pro" } 
 
#section { height:400px; background-color:#383838; color:White; padding-top:50px;} 
 
span { font-size:40px; } 
 
.column { width: 300px; border: 2px solid yellow; margin-left:40px; }

<html> 
 
<head> 
 
    <title>Breadth</title> 
 
    <link rel="Stylesheet" type="text/css" href="breadth.css" /> 
 
    <link href="fonts.css" rel="stylesheet" type="text/css" /> 
 
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <div id="main"> 
 
     <div id="section"> 
 
      <div class="column"> 
 
       <span class="icon icon-cogs"></span> 
 
       <h2>Maecenas lectus sapien</h2> 
 
       <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-05-17 08:31:43

margin-top與#section div一起移動？

回答

相關問題