Question

我有一个带有填充物的div顶栏，里面有一个div徽标。我给了div徽标一个边缘底部，但它没有向上推动徽标。当我查看源时，我可以看到边距与顶栏重叠。有人可以看看有什么问题吗？

#top-bar {
  background-color: black;
  padding: 1%;
  width: auto;
  height: 50px;
  display: block;
}

#left-menu {
  display: inline-block;
  margin-left: 5%;
  height: 50px;
  margin-bottom: 5%;
}

#navigation {
  /* width: 100%; */
  float: right;
  text-align: center;
  margin-right: 5%;
  height: 50px; 
}

<doctype html>
  <head>
     <meta charset="UTF-8">
    <title> Dif Connect </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
<html lang="en">
  <body>
    <div id="top-bar">
      <div id="left-menu">
        <img src="icons/diflogo.png" width="70px" height="70px" />
      </div>
      <div id="navigation">
        <ul>
          <li><img src="icons/instagram.png"/>  <a class="link" href="#"></a></li>
          <li><img src="icons/twitter.png"/>   <a class="link" href="#"></a></li>
          <li><img src="icons/facebook.png"/> <a class="link" href="#"></a></li>
        </ul>
      </div>
    </div>

    <!-- Scripts attached to this html -->
    <script>  src="script.js"</script>
  </body>
</html>

Answer 1

＆＃13;

#top-bar {
  background-color: black;
  padding: 1%;
  width: auto;
  height: 50px;
  display: block;
}

#left-menu {
  display: inline-block;
  margin-left: 5%;
  height: 50px;
  margin-bottom: 5%;
}

#navigation {
  /* width: 100%; */
  float: right;
  text-align: center;
  margin-right: 5%;
  height: 50px; 
}

＆＃13;

<doctype html>
  <head>
     <meta charset="UTF-8">
    <title> Dif Connect </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
<html lang="en">
  <body>
    <div id="top-bar">
      <div id="left-menu">
        <img src="https://images.pexels.com/photos/87452/flowers-background-butterflies-beautiful-87452.jpeg?h=350&auto=compress&cs=tinysrgb 1x, https://images.pexels.com/photos/87452/flowers-background-butterflies-beautiful-87452.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb 2x" width="70px" height="55px" />
      </div>
      <div id="navigation">
        <ul>
          <li><img src="icons/instagram.png"/>  <a class="link" href="#"></a></li>
          <li><img src="icons/twitter.png"/>   <a class="link" href="#"></a></li>
          <li><img src="icons/facebook.png"/> <a class="link" href="#"></a></li>
        </ul>
      </div>
    </div>

    <!-- Scripts attached to this html -->
    <script>  src="script.js"</script>
  </body>
</html>

＆＃13;

Answer 2

    #top-bar {
  background-color: black;
  padding: 1%;
  width: auto;
  height: 60px;
}

#left-menu {
  display: inline-block;
  margin-left: 5%;
  height: 50px;

}

#navigation {
  /* width: 100%; */
  color: #fff;
  float: right;
  text-align: center;
  margin-right: 5%;
  height: 50px; 
}

 <body>
    <div id="top-bar">
      <div id="left-menu">
        <img src="icons/diflogo.png" width="60px" height="60px" />
      </div>
      <div id="navigation">
        <ul>
          <li><img src="icons/instagram.png"/>  <a class="link" href="#"></a></li>
          <li><img src="icons/twitter.png"/>   <a class="link" href="#"></a></li>
          <li><img src="icons/facebook.png"/> <a class="link" href="#"></a></li>
        </ul>
      </div>
    </div>`
  </body>

保证金底部没有向上推动div

2 个答案: