HTML div 'underlapping' 它下面的 div

Question

我在为练习而创建的测试网页上有一个问题，其中我有两个 div 元素一个在另一个之上，但是顶部的一个（CSS 中的 .item）是“重叠”底部的一个（ .wide 和 .img-span 在 css 中）并且由于某种原因在另一侧突出。我一直在摆弄我的 CSS 和 HTML，但我无法修复它。

CSS：

.item {
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 4px;
    padding-bottom: 4px;
    overflow: hidden;
    margin: 0;
}

.item p {
    font-size: 18px;
}

.img-span {
    padding: 0;
    margin: 0;
    width: 100%;
}

.wide {
    width: 100%;
    height: 100%;
    opacity: 1;
    overflow: hidden;
}

HTML：

<div id="first" class="item">
        <p class="para">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum!
        </p>
   </div>
   <div id="img-span">
       <img src="img/board-911636.jpg" class="wide">
   </div>

Answer 1

在img 上设置display: block 可以解决您的问题。