Question

我正在巴西制作订阅框类型的网站。我做了一个横幅，下面是一条白线。我想删除它，并且已经使用display：block;但无济于事。这是我第一次写一个网站，所以可能会有一些错误。

＆＃13;

body {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px
}
#menu {
  height: 50px;
  background-color: #383027;
  font-size: 17px;
  font-family: Arial;
}
#menu ul {
  height: auto;
  padding: 0px 150px;
  margin: 0px;
}
#menu li {
  display: inline;
  padding: 5px;
}
#menu a {
  text-decoration: none;
  color: #fff5e6;
  padding: 8px 8px 8px 8px;
}
#menu a:hover {
  color: #e4a251;
}
#divider {
  height: 7px;
  background-color: #b68a20;
}
#body {
  height: 700px;
  background-color: #faebc9;
}
#footer {
  height: 180px;
  background-color: #2d2419;
}

＆＃13;

  <div id="container">
    <div id="menu">
      <a href="home2.html">
        <img src="paonamesalogoofficial.png" align="left">
      </a>
      <ul align="center">
        <li><a href="home2.html">HOME</a>
        </li>
        <li><a href="planos.html">PLANOS</a>
        </li>
        <li><a href="areadeatuacao.html">ATUAÇÃO</a>
        </li>
        <li><a href="perguntasfrequentes.html">PERGUNTAS</a>
        </li>
        <li><a href="assineagora.html">ASSINE AGORA</a>
        </li>
      </ul>
    </div>

    <div id="divider"></div>

    <div id="header">
      <img src="bannerpao1.png" width="100%">
    </div>

    <div id="divider"></div>

    <div id="body"></div>

    <div id="divider"></div>

    <div id="footer"></div>
  </div>

＆＃13;

Answer 1

您应该将标题内的display类型的标题更改为block，因为它默认为inline，它会为您提供文字基线下方的一些可用空间像素，以及因为每个人都知道内联元素被视为文本。

请参阅下面的解决方案。

此外，如果你在任何现代浏览器中使用检查工具检查过这个，你会注意到标题下面没有空格，而只有图像。如果你给标题一个背景颜色，你已经注意到它直接连接到下面的div。在我的解决方案中，我给了标题background-color red。

<style> body {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px
}
#menu {
  height: 50px;
  background-color: #383027;
  font-size: 17px;
  font-family: Arial;
}
#menu ul {
  height: auto;
  padding: 0px 150px;
  margin: 0px;
}
#menu li {
  display: inline;
  padding: 5px;
}
#menu a {
  text-decoration: none;
  color: #fff5e6;
  padding: 8px 8px 8px 8px;
}
#menu a:hover {
  color: #e4a251;
}
#header {
    background-color: red;
}
#header img {
    display: block;
}
#divider {
  height: 7px;
  background-color: #b68a20;
}
#body {
  height: 700px;
  background-color: #faebc9;
}
#footer {
  height: 180px;
  background-color: #2d2419;
}
</style>

<!DOCTYPE html>
<html>

<head>
  <title>Paozinho</title>
</head>

<body>
  <div id="container">
    <div id="menu">
      <a href="home2.html">
        <img src="paonamesalogoofficial.png" align="left">
      </a>
      <ul align="center">
        <li><a href="home2.html">HOME</a>
        </li>
        <li><a href="planos.html">PLANOS</a>
        </li>
        <li><a href="areadeatuacao.html">ATUAÇÃO</a>
        </li>
        <li><a href="perguntasfrequentes.html">PERGUNTAS</a>
        </li>
        <li><a href="assineagora.html">ASSINE AGORA</a>
        </li>
      </ul>
    </div>

    <div id="divider"></div>

    <div id="header">
      <img src="bannerpao1.png" width="100%">
    </div>

    <div id="divider"></div>

    <div id="body"></div>

    <div id="divider"></div>

    <div id="footer"></div>
  </div>
</body>

</html>

横幅和正文之间不需要的白线

1 个答案: