调整图片尺寸时#content容器移位的原因排查

我设置了#content与#pic两个display: inline-block的容器，二者原本处于页面同一行。但调整#pic容器内img的尺寸时，明明空间充足且二者为独立容器，#content容器却被向下推挤移位。请问这可能是什么原因？

相关代码 #

CSS代码 #

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
/*  border: 1px solid red; */
}

header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    background: black;
}

header a#logo {
    color: floralwhite;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 2em;
    font-weight: 900;
    margin-left: 2rem;
    margin-top: 8px;
}

header ul {
    margin-right: 2rem;
    height: 80px;
}

header ul li {
    list-style: none;
    display: inline-block;
    margin-right: 8px;
    margin-top: 1rem;
/*  border: 1px solid red; */
    padding: 8px;
}

header ul li a {
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-weight: 900;
    font-size: 1rem;
    color: floralwhite;
    padding: 8px;
    transition: outline 0.2s, color 0.2s, background 0.2s;
}

header ul li a:hover, header ul li a#active {
    outline: 1px solid black;
    color: black;
    background: floralwhite;
}

div#content {
    margin-left: 8rem;
    display: inline-block;
    margin-top: 4rem;
    position: relative;

}

div#content h1, div#content h2 {
    font-weight: 900;
}

div#content h2 {
    margin-top: -15px;
    text-indent: 5px;
    margin-bottom: 1rem;
}

div#content div#content2 {
    width: 400px;
    font-size: 1rem;
    font-weight: 500;
    text-indent: 5px;
}

div#content::after {
    content: "";
    height: 100%;
    width: 3%;
    background: black;
    position: absolute;
    top: 0px;
    left: -4rem;
    margin-left: 2rem;
}

span#pic, span#pic img {
    height: 250px;
    margin-left: 8rem;
/*  margin-top: ; */
    border: 1px solid white;
}

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Andri Quin </title>
    <link rel="stylesheet" type="text/css" href="Portfolio.css">
    <link rel="icon" href="letter-a.png">
</head>
<body>  
    <header>
        <a href="#" id="logo"> Andri </a>
        <ul>
            <li> <a href="Portfolio.html" id="active"> Home </a> </li>
            <li> <a href=""> Info </a> </li>
            <li> <a href=""> About </a> </li>
        </ul>
    </header>

    <div id="content">
        <h1> Hi! Im Andri Quin </h1>
        <h2> Student Web Developer </h2>
        <div id="content2">
            <p> Im a student aspiring to be a fullstack web deveoper in the near future. I also studying game development as I love playing game as well.Please look forward my work in the near future. </p>
        </div>
    </div>

    <span id="pic">
        <img src="letter-a.png">
    </span>
</body>
</html>

原因分析 #

这是inline-block元素默认的垂直对齐规则导致的：

• 所有inline或inline-block元素，默认垂直对齐方式为baseline（基线对齐），也就是以元素内部文本的基线作为对齐基准。
• 调整#pic内img尺寸时，#pic容器的基线位置会随之改变，#content会自动对齐到这个新基线，因此被向下推挤。
• 另外你当前CSS里#pic未显式设置display: inline-block，span本身是行内元素，和#content的inline-block属性搭配时，对齐规则的冲突会更明显。

解决方案 #

你可以通过以下几种方式解决这个问题：

方法1：统一设置垂直对齐方式 #

给两个容器设置明确的垂直对齐方式，比如顶部对齐：

div#content, span#pic {
    vertical-align: top;
}

方法2：给#pic显式设置inline-block属性 #

确保两个容器的display属性一致，避免行内元素和inline-block元素的对齐差异：

span#pic {
    display: inline-block;
    vertical-align: top; /* 配合设置对齐方式 */
}

方法3：改用Flex布局（更推荐） #

用Flex容器包裹两个元素，从根源上避免inline-block的对齐问题：
首先修改HTML，添加父容器：

<div class="main-container">
    <div id="content">
        <h1> Hi! Im Andri Quin </h1>
        <h2> Student Web Developer </h2>
        <div id="content2">
            <p> Im a student aspiring to be a fullstack web deveoper in the near future. I also studying game development as I love playing game as well.Please look forward my work in the near future. </p>
        </div>
    </div>
    <span id="pic">
        <img src="letter-a.png">
    </span>
</div>

然后设置CSS：

.main-container {
    display: flex;
    align-items: flex-start; /* 顶部对齐，可按需改为center/bottom */
    gap: 8rem; /* 替代原来的margin-left，控制两个元素的间距 */
    margin-left: 8rem;
    margin-top: 4rem;
}

/* 移除原容器的margin，避免重复间距 */
div#content {
    margin-left: 0;
    margin-top: 0;
}

span#pic {
    margin-left: 0;
}

内容的提问来源于stack exchange，提问作者ImAWeebキズネです