Question

我一直在浏览它，但我无法提及任何答案，基本上Header和Body之间存在白色差距，见下文：

我在某处读到某些元素有默认边距或填充像<ul>，但我无法确定，因为我刚刚进入网络。

以下是我的项目的定位方式：

header{
background-color: white;
position:relative;
}

p.secondaryText {
color: darkgray;
}

.menu{
background-color: dodgerblue;
}

.logo{
position: relative;
width: 100%;
}

.logo-img{
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}

.social{
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}

.division{
height: 2px;
width: 100%;
background-color: lightgray;
}

.img-container{
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%; /* or any custom size */
height: 100%; 
}

.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}

body{
margin: 0;
}


#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}

.main-body{
position: relative;
text-align: center;
}

.options-section{
text-align: center;
}

.services-box, .company-box, .contact-box{
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}

footer{
background-color: black;
height: 200px;
}

和菜单：

ul {
padding: 0;
margin-left: 80px;
}


li {
display: inline;
}

li a{
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}

li a:hover{
text-decoration: none;
}

我已尝试过保证金，但没有任何影响。

编辑：

如果您愿意，可以在github上下载project，在节点js上运行，只在节点服务器上运行并在端口9000中监听

http://localhost:9000/index.html

Answer 1

正如您所说，许多元素都有默认样式，其中一个是UL。

您需要做的就是用margin: 0覆盖它。

header {
  background-color: white;
  position: relative;
}

p.secondaryText {
  color: darkgray;
}

.menu {
  background-color: dodgerblue;
}

.menu ul {
  margin: 0;
}

.logo {
  position: relative;
  width: 100%;
}

.logo-img {
  position: relative;
  margin: 10px 15px 15px 100px;
  width: 120px;
  height: 100px;
}

.social {
  width: 100%;
  height: 50px;
  padding-left: 100px;
  padding-right: 50px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.division {
  height: 2px;
  width: 100%;
  background-color: lightgray;
}

.img-container {
  position: absolute;
  opacity: 0.75;
  filter: alpha(opacity=20);
  width: 100%;
  /* or any custom size */
  height: 100%;
}

.body-container {
  height: 600px;
  width: 100%;
  clear: both;
  position: relative;
}

body {
  margin: 0;
}

#frontText {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 30px;
  color: white;
  font-size: 50px;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  background-color: transparent;
}

.main-body {
  position: relative;
  text-align: center;
}

.options-section {
  text-align: center;
}

.services-box,
.company-box,
.contact-box {
  position: relative;
  width: 250px;
  height: 200px;
  margin-right: 60px;
  background-color: dodgerblue;
  display: inline-block;
}

footer {
  background-color: black;
  height: 200px;
}

and the menu: ul {
  padding: 0;
  margin-left: 80px;
}

li {
  display: inline;
}

li a {
  font-weight: bold;
  color: white;
  font-size: 15px;
  display: inline-block;
  padding: 10px 15px;
}

li a:hover {
  text-decoration: none;
}

<header>

  <div class="social">

    <p class="secondaryText">It is a long established fact that</p>

  </div>

  <div class="division"></div>

  <div class="logo">
    <img class="logo-img" src="R/Metalplatelogo.jpg">

  </div>

  <div class="menu" id="myMenu">
    <nav>

      <ul>

        <li><a href="index.html">トップページ</a></li>
        <li><a href="business.html">事業内容</a></li>
        <li><a href="company.html">会社概要</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
        <li><a href="">NEWS</a></li>

      </ul>

    </nav>

  </div>

</header>



<div class="body-container">
  <img class="img-container" src="http://via.placeholder.com/2000x2000">
  <div id="frontText">確かな技術と最新鋭の設備。<br> 半世紀に渡る信頼に支えられて<br> 私たちは、あらゆるニーズに取り組み続けています。</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>
<script src="controllersJS/controllerEvent.js"></script>

<div class="main-body">
  <p>有限会社谷口板金工業所は、屋根・外壁工事を専門とする会社です。</p>
  <h2>屋根・外壁のことならおまかせください。</h2><br>
  <p>住宅から工場やビル・神社仏閣などの大規模施設まで、あらゆる建築物に対応し工事いたします。<br>長年の実績と豊富な経験で培った技術、そして最新鋭の設備でお客様のあらゆるニーズにお応えします。</p>


</div>

<div class="options-section">

  <div class="services-box">

  </div>

  <div class="company-box">

  </div>

  <div class="contact-box">

  </div>


</div>

<div class="about-section">

</div>

<div class="news-section">

</div>

<div class="map">
  <iframe width="400" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB3Dg5WXMBa21xvPSgdEzx-Q9aX42xgwt4&#10;                &amp;q=Space+Needle,Seattle+WA" allowfullscreen="">
            </iframe>

</div>


<footer>
  This is the footer


</footer>

Answer 2

你能不能只做出身体边缘：0; ＆安培;填充：0;？＆安培;如果你想要保证金/填充，那么设置每个元素的边距和填充？

body {
margin: 0; 
padding: 0; }

标题和正文之间的不明空间

2 个答案: