css - 和 div 之间的虚幻间距

Question

我有一个 <img>坐在内联 block div 旁边，我认为这是导致问题的原因，但设置了 <img>显示: block 破坏了设计

这是 html:

---

            <img src="./images/Portrait2.jpg">

            <div id="AboutText">
                <h3>ZUG ZUG, ME NOT THAT TYPE OF ORC</h3>
                <p>
                    Me Andrew Benson, I make pretty thing you see. It make people want buy thing, make you happy. Me understand basic color theory. Color make people feel thing, yes? Blue make calm, yellow DANGER, red make go faster DAKA DAKA. But that work, me not work all time, me normal have hobbies. Me like making plant grow big and keepin fishies. If me not doing that and you have read through resume contact me with a email. It easy stupid head. (PLACEHOLDER TEXT)
                </p>


               <section class="AboutLists Margin">
                    <h3>FORTE</h3>
                    <ul>
                        <li>Branding</li>
                        <li>Illustration</li>
                        <li>Web Design</li>
                        <li>Packaging</li>
                    </ul>
                </section>
                <section class="AboutLists Margin">
                    <h3>FEATURED</h3>
                    <ul>
                        <li>The Dieline</li>
                        <li>Packaging of the World</li>
                        <li>Scholastic Awards</li>
                    </ul>
                </section>
                <section class="AboutLists">
                    <h3>OTHER MEDIUMS</h3>
                    <ul>
                        <li>
                            <a href="https://www.behance.net/AndrewJBenson" target="_new">Behance</a>
                        </li>
                        <li>
                            <a href="https://dribbble.com/BensonbyDesign" target="_new">Dribble</a>
                        </li>
                        <li>
                            <a href="Public Profilehttps://www.linkedin.com/in/andrew-benson-b209b769" target="_new">Linkden</a>
                        </li>
                        <li>
                            <a href="https://twitter.com/BensonbyDesign" target="_new">Twitter</a>
                        </li>
                    </ul>
                </section>
            </div>

        </div>
    </section>

这是受影响的 CSS:

hr{
border: 2px solid rgba(190,190,190,1.00);

margin-bottom: 15vh;
margin-top: 10vh;
margin-left:2%; 
margin-right:2%;
}

#AboutText hr{
text-align: left;
width: 10%;
}

#About{
overflow: hidden;
margin-left:2%; 
margin-right:2%;
clear: both;

margin-bottom: 160px;
}

#About img{
width:30%;
height: auto;
vertical-align: top;
}

#AboutText{
width: 60%;
display: inline-block;
}

#AboutText h3{
font-family: 'Lato', serif;
font-weight: bold;
font-size: 11pt;
letter-spacing: 2px;
color:rgba(190,190,190,1.00);

margin-bottom: 20px;
}

#About p{
line-height: 30px;
font-family: 'Lato', serif;
font-weight: thin;
color:rgba(80,80,80,1.00);

margin-bottom: 135px;
}

.AboutLists{
display: inline-block;
vertical-align:top;
}


.AboutLists.Margin{
margin-right: 10%;
}

.AboutLists h3{
font-family: 'Lato', serif;
font-weight: bold;
font-size: 11pt;
letter-spacing: 2px;
color:rgba(190,190,190,1.00);

margin-bottom: 20px;
}

.AboutLists li{
line-height: 30px;
font-family: 'Lato', serif;
font-weight: thin;
color:rgba(80,80,80,1.00);

text-decoration: none;
}

.AboutLists a{
color:rgba(80,80,80,1.00);
text-decoration: none;
}

我的测试页面上的关于部分有一个实时版本:http://benson.graphics/test/#

Answer 1

将float: left添加到#About img，这将使那个空间消失。