gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:58:41 25 4
gpt4 key购买 nike

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

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;
}
  <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>

最佳答案

您应该将 header 内图像的display 类型更改为block,因为它默认为inline,这会为您提供一些像素文本基线下方的自由空间,众所周知,内联元素被视为文本。

请参阅下面的解决方案。

此外,如果您在任何现代浏览器中使用检查工具检查过这一点,您会注意到标题下方没有空白,只有图像。如果您为标题指定了背景色,您会注意到它直接连接到下面的 div。在我的解决方案中,我为 header 提供了 redbackground-color

<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>

关于html - 横幅和正文之间不需要的白线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35641879/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com