как добавить место вверху страницы - PullRequest
0 голосов
/ 29 ноября 2011

Я учусь делать простую страницу, используя HTML и CSS, и страница выглядит так http://imgur.com/sRzl7
однако бигбокс находится слишком близко к вершине.

как добавить поле или пробел поверх него, кроме использования разрывов строк <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>

Ответы [ 5 ]

3 голосов
/ 29 ноября 2011

Вы можете применить margin к элементу body или bigbox.

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

или

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

Ссылка на CSS CSS

1 голос
/ 29 ноября 2011
.bigbox {
margin:50px auto;
width:780px;
height:560px;
...
}
0 голосов
/ 04 января 2012

Как уже отмечали другие, вы используете margin-top, чтобы добавить место сверху.Заполнение используется, чтобы добавить пространство внутри.Если вы установите отступ в 25px, если вы поместите текст в это поле, он будет на расстоянии 25 пикселей от краев.

0 голосов
/ 29 ноября 2011

Я часто использую padding-top: 1 px;

0 голосов
/ 29 ноября 2011

Вы можете добавить поле или отступ в начало класса .bigbox.Попробуйте это margin-top: 50px;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...