Question

我的造型有问题。这是我的代码：

<html>
<head>
  <style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
  html,
  body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
  }

  #header {
    height: 100px;
    background-color: lightgrey;
    text-align: center;
  }

  #menu {
    height: 30px;
    background-color: #B81F00;
  }

  #menu a {
    text-decoration: none;
    color: white;
    text-align: center;
    width: 15vw;
    line-height: 0;
    display: inline-block;
    /*border: black solid 1px;*/
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
  }

  #menu a:hover {
    background-color: white;
    color: #7B1700;
  }

  @media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
    #menu a {
      background-color: #B81F00;
      float: center;
      display: block;
      width: 100%;
      margin-top: 20px;
      font-size: 20px;
      line-height: 20px;
      margin: 0;
      padding: 0;
    }
    #menu {
      position: relative;
      padding-top: 0;
      margin-top: 0;
      height: auto;
    }
  }
}
  </style>
</head>

<body>
  <div id="header">
  </div>
  <div id="menu">
    <a href="#">
      <p>Section1</p>
    </a>
    <a href="#">
      <p>Section2</p>
    </a>
    <a href="#">
      <p>Section3</p>
    </a>
    <a href="#">
      <p>Section4</p>
    </a>
  </div>
</body>

</html>

现在，当我以移动视角打开它时，我得到了这个：

正如您所看到的，这两个元素之间有一点空白，但我无法弄清楚是什么导致了这一点。

Answer 1

P元素有边距，你应该删除它。改为使用填充。

#menu a p {
    padding: 1em;
    margin: 0;
}

如果你想将P的内容完美居中，请尝试使用flex-box。

CSS - 2个div之间有一个随机的空格

1 个答案: