Unwanted White line between banner and body
Question
I am making a subscription box type website in Brazil. I made a banner and underneath it is a white line.I want to remove it, and already did so by using display: block; but to no avail. This is my first time writing up a site so there might be a few mistakes.
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>
1 answers
solution1
0 2016-02-26 10:07:36
You should change the display type of your image inside the header to block , because it defaults to inline which gives you some pixels of free space below the text-baseline, and as everyone knows inline elements are treated as text.
See the solution below.
Also if you'd checked this using an inspection tool in any modern browser, you'd have noticed that not the header had whitespace underneath it, but only the image. If you'd given the header a background-color, you'd have noticted it connected directly to the div below. In my solution I've given the header a background-color of 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.