Question

http://imgur.com/a/Aqm3y 标题和导航栏之间有一个空格，每次插入图像时都会分割页面。我希望图像实际上在背景图像上，而不是它创建一个空白区域。

<!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 L.B. 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>

.ch_element.ch_wrapper {
  float:left;
}

Answer 1

如果您在标题中使用img标记，则问题是10px的填充。尝试删除它，看看它是否有效。

编辑：

对于背景图像上的汽车，您需要重新构建您的CSS。我会将背景图像放在BODY上并将其从标题中删除。

如何摆脱标题上的空白区域以及图像的位置？

1 个答案: