保證金頂部移動我的所有內容

我有這個網站保證金頂部移動我的所有內容

<body id="page-id-login" class=""> 
<div id="viewport" data-am-control="vertical-layout" > 
    <div id="container_buttons" data-am-control="vertical-layout" > 
     <button class="item_vertical btn" >Twitter dinámico</button> 
     <button class="item_vertical btn">Spinner simple</button> 
     <button class="item_vertical btn">Spinner personalizado</button> 
    </div> 
</div><!-- END VIEWPORT--> 

</body>

這個CSS

#viewport{ 
width: 480px; 
height: 600px; 
background: linear-gradient(#a8a8a8, #ebebeb); 
} 

#container_buttons{ 
padding: 0 10px; 
} 

.item_vertical{ 
display:inline-block; 
} 

.btn{ 
font-size: 20px; 
color: white; 
width: 100%; 
padding-top: 5px; 
padding-bottom: 5px; 
background: linear-gradient(#0088cc, #0044cc); 
border-style: solid; 
border-width: 1px; 
border-color: #0044cc; 
border-radius: 5px; 
margin-top: 20px; 
} 

.btn:active{ 
background: linear-gradient(#0044cc, #0044cc); 
border-style: solid; 
border-width: 1px; 
border-color: #0044cc; 
border-radius: 5px; 
}

有了這個，我看到這一點：

http://img805.imageshack.us/img805/3980/capturadepantalla201305i.png

如果我加入＃ container_buttons this：

#container_buttons{ 
margin: 60px; 
padding: 0 10px; 
}

的邊距將所有內容（而不是隻在div #container_buttons）就像你可以在此看到圖像（上面有空格）

http://img20.imageshack.us/img20/6738/capturadepantalla201305iz.png

所以......有什麼邊緣只能移動ID =「container_buttons」的div嗎？

謝謝！

來源

2013-05-30 Bae

這可能是相關的，以瞭解如何利潤率工作：HTTP：//計算器.com/questions/1394724/css-margin-top-when-parents-got-no-border – technophobia

你的利潤率倒塌，這裏是如何解決這個問題：

#viewport { 
    overflow:auto; 
}

來源：CSS: Margin-top when parent's got no border

參考：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

來源

2013-05-30 16:44:03 technophobia

儘可能簡單，很好的解決方案。 –

你必須做這樣的事情：

#viewport{ 
width: 480px; 
height: 600px; 
background: linear-gradient(#a8a8a8, #ebebeb); 
} 

#container_buttons{ 
    padding-top:10px; 
    margin: 10px; 
} 

.item_vertical{ 
display:inline-block; 
} 

.btn{ 
    margin-bottom: 10px; 
font-size: 20px; 
color: white; 
width: 100%; 
background: linear-gradient(#0088cc, #0044cc); 
border-style: solid; 
border-width: 1px; 
border-color: #0044cc; 
border-radius: 5px; 
} 

.btn:active{ 
background: linear-gradient(#0044cc, #0044cc); 
border-style: solid; 
border-width: 1px; 
border-color: #0044cc; 
border-radius: 5px; 
}

結果現在是正確的。我改變了所有填充和保證金選項，因爲它們有點混淆。這裏是一個例子的fiddle。

來源

2013-05-30 16:43:51 Philibobby

保證金頂部移動我的所有內容

回答

相關問題