Question

我正在学习使用html和css创建一个简单的页面，页面看起来像http://imgur.com/sRzl7 但是bigbox太靠近顶部了。

如何在其上添加一些边距或空格，而不是使用换行符<br>

这是我的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>

Answer 1

您可以将margin应用于body或bigbox元素。

body {
    background-color: #586B5E;
    margin-top: 10px;
}

或

.bigbox {
    margin-top: 10px;
    ...
}

CSS Margin Reference

Answer 2

.bigbox {
margin:50px auto;
width:780px;
height:560px;
...
}

Answer 3

您可以在.bigbox类的顶部添加一些边距或填充。试试这个margin-top: 50px;

Answer 4

我经常使用padding-top：1 px;

Answer 5

正如其他人所说，您使用margin-top为顶部添加空间。填充用于增加内部空间。如果你将padding设置为25px，如果你将文本放入该框中，那么它将与边缘相距25像素。

如何在页面顶部添加空间

5 个答案: