Question

我尝试将导航div的标题div的margin-bottom设置为0，margin-top设置为0。似乎没什么用。

当我在导航div上设置margin-bottom时，我肯定可以在导航和容器div之间添加空间没问题。

我似乎无法控制导航div相对于我的标题的移动。

＆＃13;

* {
  box-sizing: border-box;
}

a:link {
  color: black;
}

a:hover {
  color: white;
}

ul {
  padding: 0;
  list-style-type: none;
}

.container {
  width: 1000px;
  background: red;
  margin: 0 auto;
}

.heading {
  height: 100px;
  background: beige;
  text-align: center;
  font-size: 20pt;
  text-shadow: 0.1em 0.1em white;
  font-family: "cookie";
}

.navigation {
  height: 50px;
  width: 1000px;
  background: lightblue;
  font-family: sans-serif;
  line-height: 50px;
  text-align: center;
}

.navigation ul li {
  display: inline;
  margin: 0 40px;
}

.navigation ul li a {
  text-decoration: none;
}

.content {
  min-height: 600px;
  background: beige;
  width: 666px;
  float: left;
  margin-bottom: 10px;
  padding: 0 15px;
  text-align: center;
  font-family: sans-serif;
}

.content-heading {
  font-family: sans-serif;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
}

.sidebar-heading {
  min-height: 50px;
  width: 334px;
  background: lightgreen;
  float: right;
  text-align: center;
  font-family: sans-serif;
}

.sidebar-content {
  width: 334px;
  min-height: 550px;
  background: lightgreen;
  float: right;
  padding: 0 15px;
  text-align: center;
  font-family: sans-serif;
  margin-bottom: 10px;
}

.footer {
  clear: both;
  background: lightblue;
  height: 50px;
  text-align: center;
  font-family: sans-serif;
}

.heading-child {
  line-height: 100px;
}

.sidebar-heading-child {
  line-height: 50px;
}

.footer-child {
  line-height: 50px;
}

＆＃13;

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        families: ["Cookie:regular"]
      }
    });
  </script>
</head>
</head>

<body>
  <div class="container">
    <div class="heading">
      <h1 class="heading-child">All I Want is Whirled Peas!</h1>
    </div>
    <div class="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Account</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="content">
      <div class="content-heading"><strong>Welcome</strong></div>
      This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content
      of the content section. This is content of the content section. This is content of the content section. This is content of the content section.
    </div>

    <div class="sidebar-heading">
      <div class="sidebar-heading-child"><strong>Additional Info</strong></div>
    </div>
    <div class="sidebar-content">
      Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello
      this is sidebar content. Hello this is sidebar content.
    </div>

    <div class="footer">
      <div class="footer-child">Website created by Josh &copy 2017</div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

默认@Component public class MyUnregisterService { @Autowired private Eventbus eventbus; @Autowired private UserCreateListener listener; public void unregister() { eventbus.unregister(listener) } }＆amp; h1代码会从顶部和{1}}获取一些ul在底部，只需将其设置为margin即可。请查看下面的代码段。

margin:0

 WebFont.load({
      google: {
        families: ["Cookie:regular"]
      }
    });

 *{
     box-sizing: border-box;
 }

 a:link {
     color: black;
 }

 a:hover {
     color: white;
 }

 ul {
     padding: 0;
     margin: 0px;
     list-style-type: none;
 }

 .container {
     width: 1000px;
     background: red;
     margin: 0 auto;
 }

 .heading {
     height: 100px;
     background: beige;
     text-align: center;
     font-size: 20pt;
     text-shadow: 0.1em 0.1em white;
     font-family: "cookie";
 }

 .navigation {
     height: 50px;
     width: 1000px;
     background: lightblue;
     font-family: sans-serif;
     line-height: 50px;
     text-align: center;
 }

 .navigation ul li {
     display: inline;
     margin: 0 40px;
 }

 .navigation ul li a {
     text-decoration: none;
 }

 .content {
     min-height: 600px;
     background: beige;
     width: 666px;
     float: left;
     margin-bottom: 10px;
     padding: 0 15px;
     text-align: center;
     font-family: sans-serif;
 }

 .content-heading {
     font-family: sans-serif;
     min-height: 50px;
     line-height: 50px;
     text-align: center;
 }

 .sidebar-heading {
     min-height: 50px;
     width: 334px;
     background: lightgreen;
     float: right;
     text-align: center;
     font-family: sans-serif;
 }

 .sidebar-content {
     width: 334px;
     min-height: 550px;
     background: lightgreen;
     float: right;
     padding: 0 15px;
     text-align: center;
     font-family: sans-serif;
     margin-bottom: 10px;
 }

 .footer {
     clear: both;
     background: lightblue;
     height: 50px;
     text-align: center;
     font-family: sans-serif;
 }

 .heading-child {
     line-height: 100px;
 }

 .sidebar-heading-child {
     line-height: 50px;
 }

 .footer-child {
     line-height: 50px;
 }

 h1 {
     margin: 0px;
 }

我的标题和导航div之间有一个未知的间隙/空间。我试过查找答案，但似乎没有提供任何修复

1 个答案: