如何摆脱 2 div 之间的 whitespace/margin？

Question

我正在制作一个我正在搞乱的 meme/troll 网站，并有点应用我到目前为止在 HTML/CSS 中学到的一切，但我遇到了一个问题我想不通。在下面的图片中，有一个带有“文章”的块元素，然后是上面的图片。但是在下面的space和上面的图片之间，两者之间有一个白色的space。我尝试了以下方法：使用 * 使页面上的所有页边距为 0，去掉顶部图片和底部部分的页边距，但两者似乎都无济于事。这是我必须处理的事情还是有解决办法？

https://i.stack.imgur.com/l45oQ.png

代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
        }
        #header{
            width: 100%;
            height: 18rem;
            margin: 0;
        }
        .dropdown1{
            display: none;
        }
        .navbar ul li:hover .dropdown1{
            display: inline-flex;

        }
        .navbar{
            background-color: #7E7B7B;
            margin: 0;
        }
        
        

    </style>
</head>
<body>
    <img id="header" src="http://tencowchick.com/wp-content/uploads/2011/03/2011-03-09-001.jpg" alt="header">
    <div class="navbar">
    <ul>
        <li>
            <a href="#">Artices</a>

            <div class="dropdown1">
                <ul>
                    <li>John Cena Dies After Tragic Accident</li>
                    <li>PewDiePie Dies After T-Series Assasination</li>
                    <li>Will Smith's Wife Kills Him After Grammy's Incident!</li>
                </ul>
            </div>
        </li>
    </ul>
    </div>
</div>
    

</body>
</html>```

[![pictare][1]][1]


  [1]: https://i.stack.imgur.com/l45oQ.png

Answer 1

将 display:block 添加到您的图片中

img{
display:block;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
        }
        #header{
            width: 100%;
            height: 18rem;
            margin: 0;
        }
        .dropdown1{
            display: none;
        }
        .navbar ul li:hover .dropdown1{
            display: inline-flex;

        }
        .navbar{
            background-color: #7E7B7B;
            margin: 0;
        }
        
        

    </style>
</head>
<body>
    <img id="header" src="http://tencowchick.com/wp-content/uploads/2011/03/2011-03-09-001.jpg" alt="header"><div class="navbar">
    <ul>
        <li>
            <a href="#">Artices</a>

            <div class="dropdown1">
                <ul>
                    <li>John Cena Dies After Tragic Accident</li>
                    <li>PewDiePie Dies After T-Series Assasination</li>
                    <li>Will Smith's Wife Kills Him After Grammy's Incident!</li>
                </ul>
            </div>
        </li>
    </ul>
    </div>

    

</body>
</html>

Answer 2

div 元素之间 space 的大小由 font-size 决定。您可以创建使用以下 CSS 代码来解决您的问题：

#noSpace {
    font-size: 0;
}

#noSpace > div {
    font-size: /* Whatever you want the font-size to be */;
}

在此之后，您可以像这样将 div 元素放入 div 中：

<div id="noSpace">
  <div>Lorem Ipsum</div>
</div>

Answer 3

        *{
            margin: 0;
        }
        #header{
            width: 100%;
            height: 18rem;
            margin: 0;
            display:block;
        }
        .dropdown1{
            display: none;
        }
        .navbar ul li:hover .dropdown1{
            display: inline-flex;

        }
        .navbar{
            background-color: #7E7B7B;
            margin: 0;
        }

<body>
    <img id="header" src="http://tencowchick.com/wp-content/uploads/2011/03/2011-03-09-001.jpg" alt="header">
    <div class="navbar">
    <ul>
        <li>
            <a href="#">Artices</a>

            <div class="dropdown1">
                <ul>
                    <li>John Cena Dies After Tragic Accident</li>
                    <li>PewDiePie Dies After T-Series Assasination</li>
                    <li>Will Smith's Wife Kills Him After Grammy's Incident!</li>
                </ul>
            </div>
        </li>
    </ul>
    </div>
</div>

如何摆脱 2 div 之间的 whitespace/margin？

How to get rid of whitespace/margin between 2 divs?

html

css

margins