如何清除标题上的空白以及图像在哪里？
[英]How do I get rid of the white space on the header and where the images are?
问题描述
http://imgur.com/a/Aqm3y标头和导航栏之间有一个空格，每当我插入图像时，它都会拆分页面。 我希望图像实际上在背景图像上，而不是在其上留出空白。
img { margin: 10px; height: 170px; width: 170px; box-shadow: rgba(0, 0, 0, 0.2) 10px 10px; } @font-face { font-family: Moon Light; src: url(MoonLight.otf); } #header { background-position: top; margin: 0; padding: 10px; text-align: center; color: #ffb400; } h1 { font-family: Moon Light; background-image: url(polygon.jpg); margin: 0; } p { color: white; font-family: Moon Light; text-align: center; padding: 16%; font-weight: bold; font-size: 30px; background-image: url(polygon.jpg); margin: 0; } #footer { font-family: Moon Light; clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; border-bottom: 1px solid #ff3400; border-top: 1px solid #ff3400; background-color: #ffb400; color: #ff004b; } h3 { text-align: center; padding: 7%; background-image: url(polygon.jpg); margin: 0; font-family: Moon Light; color: #ffb400; font-size: 30px; } ul { font-family: Moon Light; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #ff3400; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #ff004b; } .active { background-color: #ffb400; }
<!DOCTYPE HTML> <html lang="en"> <head> <title>LOS BANTOS CUSTOMS</title> <meta charset="utf-8"> <link rel="stylesheet" href="DERENTWURF.css"> </head> <BODY> <div id=header> <h1> MODDING YOUR DREAM CAR INTO REALITY! </h1></div> <ul class="side-nav"> <li><a class="active" href="HOMIEPAGE1.html">HOME</a></li> <li><a href="SERVICES.html">SERVICES</a></li> <li><a href="GALLERY.html">GALLERY</a></li> <li><a href="ABOUTUS.html">ABOUT US</a></li> <li><a href="CONTACT.html">CONTACT</a></li> </ul> <p> Welcome to Los Bantos Customs! At LB we modify cars to your liking and provide you with our high-end services such as window tinting, respraying, window tinting and much more. <div id="container">"<img src="https://scontent.cdninstagram.com/hphotos-xfp1/t51.2885-15/s640x640/sh0.08/e35/11917979_826159337505466_283957219_n.jpg" alt="amg"> <img src="https://scontent.cdninstagram.com/hphotos-xap1/t51.2885-15/s640x640/sh0.08/e35/12237239_1004549372948855_1839675769_n.jpg" alt="purple honda"> <img src="https://scontent.cdninstagram.com/hphotos-xpt1/t51.2885-15/s640x640/sh0.08/e35/11934798_1620845201507358_1198463095_n.jpg" alt="MINT MOD"> <img src="https://scontent.cdninstagram.com/hphotos-xtf1/t51.2885-15/s640x640/sh0.08/e35/11348091_579493905523184_1921894326_n.jpg" alt="Sliver mod"> <img src="https://scontent.cdninstagram.com/hphotos-xat1/t51.2885-15/s640x640/sh0.08/e35/11350873_1516346318690198_385687089_n.jpg" alt="subaru red mod"> <img src="https://scontent.cdninstagram.com/hphotos-xpt1/l/t51.2885-15/s640x640/sh0.08/e35/12338587_567880666702430_1666379795_n.jpg" alt="FWD SUK"> <img src="https://scontent.cdninstagram.com/hphotos-xpt1/t51.2885-15/s640x640/sh0.08/e35/12141836_701952009904466_2099670799_n.jpg" alt="SHIRO DEVIL"> <img src="https://scontent.cdninstagram.com/hphotos-xat1/t51.2885-15/s640x640/sh0.08/e35/12139887_1662246847325829_754159365_n.jpg" alt="BLUE WING"> <img src="https://scontent.cdninstagram.com/hphotos-xap1/t51.2885-15/s640x640/sh0.08/e35/11350837_183170668693850_989498919_n.jpg" alt="SUPRA"></div> <p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /> </a> </p> <div id=footer> Nia Daniels/ FINAL EXAM/ CIST1510-Web Development I (21401) </div> </body> </html>
1 个解决方案
解决方案1
-1 已采纳 2015-12-15 18:50:01
如果您在标头中使用img标签，则问题是填充的10px。 尝试删除它，看看是否可行。
编辑：
至于汽车在背景图像上，则需要重组CSS。 我会将背景图像放在车身上，然后从标题中删除它。
我的网页底部有一个不必要的空白，它是从哪里来的，我该如何摆脱它？
[英]There's an unnecessary white space at the bottom of my webpage, where is it coming from and how can I get rid of it?
我做了一个网页，但底部有多余的空白，我该如何摆脱这个？
[英]I made a webpage but have excess white space at the bottom, how do I get rid of this?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.