如何在页面顶部添加空间
我正在学习使用 html 和 css 制作一个简单的页面，页面看起来像这样 https://i.sstatic .net/jpOZj.jpg
然而大盒子距离顶部太近了。
除了使用换行符之外，如何在其顶部添加一些边距或空格
这是我的 CSS
root {
display: block;
}
body {
background-color: #586B5E;
}
.bigbox {
margin-left:auto;
margin-right:auto;
width:780px;
height:560px;
background-color:#AFBCAC;
border: 1px solid #AFBCAC;
padding: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
box-shadow: 0px 0px 20px #CCD9C8;
-webkit-box-reflect: below 15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(85%, transparent), to(rgba(255,255,255,0.2)));
}
，这是我的 HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Surat v0.1</title>
<link rel="stylesheet" href="style/main.css" type="text/css" />
</head>
<body>
<div class="bigbox">
</div>
<?php
// put your code here
?>
</body>
</html>
I am learning to make a simple page using html and css and the page looks like this https://i.sstatic.net/jpOZj.jpg
however the bigbox is too close to the top.
how to add some margin or spaces on top of it, other than using line breaks <br>
here is my CSS
root {
display: block;
}
body {
background-color: #586B5E;
}
.bigbox {
margin-left:auto;
margin-right:auto;
width:780px;
height:560px;
background-color:#AFBCAC;
border: 1px solid #AFBCAC;
padding: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
box-shadow: 0px 0px 20px #CCD9C8;
-webkit-box-reflect: below 15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(85%, transparent), to(rgba(255,255,255,0.2)));
}
and here is my HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Surat v0.1</title>
<link rel="stylesheet" href="style/main.css" type="text/css" />
</head>
<body>
<div class="bigbox">
</div>
<?php
// put your code here
?>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您可以将
margin应用于body或bigbox元素。或
CSS 边距参考
You can apply
marginto either thebodyor thebigboxelement.or
CSS Margin Reference
我经常使用 padding-top: 1 px;
I often use padding-top: 1 px;
您可以在
.bigbox类的顶部添加一些边距或填充。试试这个margin-top: 50px;You can add some margin or padding to the top of the
.bigboxclass. Try thismargin-top: 50px;正如其他人所指出的，您可以使用 margin-top 来向顶部添加空间。
填充用于增加内部空间。如果将内边距设置为 25 像素，则将文本放入该框中时，文本距边缘将是 25 像素。
As others have noted, you use margin-top to add space to the top.
Padding is used to add space inside. If you set padding to say 25px, if you put text into that box it would be 25 pixels away from the edges.