Question

我对HTML / CSS相当陌生，并且我一直在建立网站。

我设法使用font-size：0删除了div之间的空白，但是现在我偶然地做了一些事情（我不知道是什么）之后，它又在那里了。

我尝试了所有可能的方法，除了“ hacks”外，没有空白，因为这很丑陋，或者将空白注释掉，或者类似的东西，因为它没有这些空白就可以了。我以前使用的字体大小均为0，但现在似乎不起作用。

我只会为您提供一切，因为我不知道问题出在哪里。

HTML：

 * {
     margin: 0;
     padding: 0;
     font-family: 'Segoe UI';
}
/* -----------Header Section----------- */
 .teamworkImage {
     width: 100vw;
     height: 50vw;
}
 .caption {
     position: absolute;
     top: 50%;
     transform: translateY(-110%);
     font-family: 'Segoe UI';
     color: rgb(255, 255, 255);
     font-size: 30px;
     background-color: rgba(0,0,0,0.7);
     width: 500px;
     padding: 20px;
}
 .logo {
     width: 250px;
     height: 100px;
     position: absolute;
     bottom: 840px;
     left: 10px;
}
 .image{
     font-size: 0;
    /* To remove space between Divs */
     display: block;
     width: 100vw;
     height: 50vh;
}
/* -----------The first section CSS code----------- */
 #first {
     background-color: #662F00;
    /* Brown */
     display: block;
     width: 100vw;
     height: 50vw;
}
 #first .text {
     width: 50vw;
     display: inline-block;
     color: white;
}
 #first img {
     width: 50vw;
     height: 50%;
     display: inline-block;
}

<!DOCTYPE html>
    <html>
       <head>
          <link rel='stylesheet' type='text/css' href='css/main.css'>
       </head>
       <body>
          <div class='image'>
             <img src='https://cdn.pixabay.com/photo/2016/03/09/09/59/men-1245982_960_720.jpg' class = 'teamworkImage'> 
             <a href = 'index.html'>
             <img src = 'https://via.placeholder.com/350x150' class = 'logo'>
             </a>
             <div class='caption'>
                <h1>THIS IS TEAMWORK</h1>
                <p> Our team-building activites help you form new friends, face fears, and - most important of all - have fun.</p>
             </div>
          </div>
          <div id='main'>
          <div id = 'first'>
             <div class = 'text'>
                <p>Join us as we show you the beauty of teamwork. With our experienced instructors, you can expect to:</p>
                <ol>
                   <li>Make new friends</li>
                   <li>Develop your confidence</li>
                   <li>Learn skills</li>
                </ol>
                <p>Here at Out and Up, we have a reputation for creating exciting teambuilding activities. We know the ideal adventure for you, built on the knowledge of years of success.</p>
             </div>
             <img src = 'https://via.placeholder.com/350x150'>
          </div>
          <div id = 'second'>
             <h1>Testimonials</h1>
             <img src="https://via.placeholder.com/350x150" width = '450px' height = '200px'>
             <h3>Brilliant. Loved every minute.</h3>
             <p>This activity really helped me to push on, and pursue my dreams. I am dumb.</p>
             <h6>Kamanda Korga</h6>
             <img src="https://via.placeholder.com/350x150" width = '450px' height = '200px'>
             <h3>Great!!!</h3>
             <p>I'll come again anyday! Couldn't have asked for more. My mentors and supervisors inspired me to go to jail!</p>
             <h6>Andan Kumrar</h6>
             <img src="https://via.placeholder.com/350x150" width = '450px' height = '200px'>
             <h3>Hated it!</h3>
             <p>This activity couldn't have been worse, costing £760,000,000 all I managed to do was climb some ropes! Not worth your money!</p>
             <h6>Scott Poshington</h6>
             <div>
             </div>
          </div>
          <script src='js/jquery.js'></script>
          <!--<script src='js/behavior.js'></script>-->
       </body>
    </html>

即使字体大小为0，如何删除div之间的空白？

0 个答案: