html - margin 顶部移动我所有的内容

标签 html css margin

我有这个html

<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:

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

margin-top 移动所有内容(不仅是 div #container_buttons),就像您在这张图片中看到的那样(上方有空白)

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

那么...有什么办法可以让 margin 只移动 id="container_buttons"的 div?

谢谢!!

最佳答案

您的边距正在崩溃,这是解决方法:

#viewport {
    overflow:auto;
}

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

引用:http://www.w3.org/TR/CSS2/box.html#collapsing-margins

关于html - margin 顶部移动我所有的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16841509/

相关文章:

php - 从一个大的 html 变量中获取一个字符串

html - 使用 css 访问下一个元素(不是子元素)

html - 选择所有带有 Angular JS 的复选框

html - 以相等的边距居中 div。底部边距不适用于高度 100vh?

javascript - 边距和填充导致计算布局问题

JavaScript 如何将我的 volumeSlider 设置为最新值?

css - 帮助列表样式图像

CSS:加载微调器方形圆形外观

javascript - 到达底部时单击以防止滚动

html - 为什么这个 div margin-top 没有按预期工作?