Html 页边空白顶部移动所有我的内容
我有这个htmlHtml 页边空白顶部移动所有我的内容,html,css,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
<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>
有了这些,我看到了:
如果我向#容器"按钮添加以下内容:
#container_buttons{
margin: 60px;
padding: 0 10px;
}
页边距顶部移动所有内容(不仅仅是div#container(容器)按钮),如图所示(上方有空白)
所以。。。是否有任何方法可以只使用id=“container\u按钮”移动div
谢谢 你必须这样做:
#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;
}
结果现在是正确的。我更改了所有的填充和边距选项,因为它们有点混淆。下面是一个示例。您的页边距正在崩溃,下面是如何修复它:
#viewport {
overflow:auto;
}
资料来源:
参考资料:这可能与了解利润率的工作原理有关:简单到哪里,就是最好的解决方案。
#viewport {
overflow:auto;
}