Question

我有一个<img>坐在内联块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;
}

我的测试页面上的实时版本位于about部分：http://benson.graphics/test/#

Answer 1

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

Answer 2

空间是由内联块元素引起的。有几种方法，但最简单的方法是将容器字体大小设置为0.所以在这种情况下它将是：

#About{
 font-size:0;
}

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

<img/>和div

2 个答案: