CODEWITHSUNDEEP
htmlcss
skeith
skeith

Reputation: 83

how to add space at top of page

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>

Upvotes: 1

Views: 16995

Answers (5)

Ayub
Ayub

Reputation: 875

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.

Upvotes: 0

Steve Robillard
Steve Robillard

Reputation: 13471

You can add some margin or padding to the top of the .bigbox class. Try this margin-top: 50px;

Upvotes: 0

lemon郑
lemon郑

Reputation: 690

I often use padding-top: 1 px;

Upvotes: 0

Beau Grantham
Beau Grantham

Reputation: 3456

You can apply margin to either the body or the bigbox element.

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

or

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

CSS Margin Reference

Upvotes: 4

bookcasey
bookcasey

Reputation: 40453

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

Upvotes: 1

Related Questions