<img> 和 div 之间的幻像间距

Question

我有一个 <img> 坐在内联块 div 旁边，我认为这是导致问题的原因，但是将 <img> 设置为 display: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，这将使 space 消失。

Answer 2

space 是由 inline-block 元素引起的。有几种方法可以解决这个问题，但最简单的方法是将容器字体大小设置为 0。因此在这种情况下它将是：

#About{
 font-size:0;
}

然后您需要为该部分中的文本元素指定字体大小。

<img> 和 div 之间的幻像间距

Phantom Spacing between <img> and a div

css

image

spacing