<img> 和 div 之间的虚拟间距答案

【问题标题】：Phantom Spacing between <img> and a div<img> 和 div 之间的虚拟间距
【发布时间】：2017-04-18 23:47:35
【问题描述】：

我有一个 <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;
}

我在测试页面的 about 部分有一个实时版本：http://benson.graphics/test/#

【问题讨论】：

标签： css image spacing

【解决方案1】：

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

【讨论】：

那行得通，我早些时候浮动它，但根据另一位用户的建议，我认为浮动是不需要的。谢谢！

【解决方案2】：

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

#About{
 font-size:0;
}

然后，您需要为本节中的文本元素指定字体大小。

【讨论】：