Question

大家好，我正在为我的大学项目创建一个网站，我需要一些帮助，因为我不知道我是怎么做到的。基本上我有两个盒子在接触我想要它们之间的小间隙。任何帮助表示赞赏。

这里提前干杯是我的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style_sheet.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="wrapper">
<div id="top">
<div class="logo"> </div>


</div>
<div id="menu">
<div class="button"> Home </div>
<div class="button"> Destinations </div>
<div class="button"> Make A Booking </div>
<div class="button"> Things To Do </div>
<div class="button"> Contact Us </div>
</div>
<div id="box">
content here
</div>
<div id="deal_one">



</div>
</body>
</html>





CSS


   #wrapper
   {
   width: 80%;
position:relative;
margin: 0 auto;

}

#top
{

width:100% ;
height:200px;
background-color:rgba(0, 95, 160, 1);

border:solid 2px black;
position:relative;


}
#menu {
width: 100%;
height: 150px;
background-color: #fff;
border: solid 2px black;
text-align:center;
position: relative;
display: inline-block;

}

#box {
width:100% ;
min-height:500px;
background-color:rgba(0, 95, 160, 1);
margin-top:0;
border:solid 2px black;
position:relative;
}
.button {
font-family:Verdana, Geneva, sans-serif;
font-size:15pt;
display:inline-block;
margin: 0 auto;
margin-left:5%;
margin-right:5%;
margin-top:4.5%;
}
.logo {
position:relative;
background-image:url(../Images/Logo%203.png);
background-size:650px;
width:500px;
height:900px;
top:-30%;
display:inline-block;
z-index:500;
margin: 0 auto;
background-repeat:no-repeat;
margin-left:-10%;
}

#deal_one {
width:350px;
height:300px;
background-color:rgba(0, 95, 160, 1);
border: solid 2px black;
position:relative;
}

Answer 1

Margin是元素之外的空间。你可能想设置它。您可能还想查看box model：

Box model display

盒子很动人

1 个答案: