设置inline-block的DIV仍占满右侧空间，margin设置异常求助

你的核心问题是CSS属性覆盖：在.profile-preview-div的样式里，你先后写了display: inline-block和display: grid，CSS中后声明的属性会覆盖前面的，所以实际生效的是display: grid——而grid容器默认是块级元素，会自动占满父容器的整行宽度，这就是为什么你的卡片看起来像block元素。

修复方案 #

保留内部的grid布局来排列卡片内容，给卡片的父容器（比如body，或者专门创建一个容器）添加横向排列的布局，让卡片能并排显示：

修改后的CSS代码 #

/* 给父容器（这里用body）添加flex布局，实现卡片横向排列并自动换行 */
body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 替代margin的间隙控制，更简洁 */
  padding: 10px;
}

.profile-preview-div {
  /* 删掉display: inline-block，保留grid */
  border-color: blue;
  border-style: solid;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 20% 40% 40%;
  grid-template-rows: repeat(3, 40px);
  width: 200px;
  zoom: 2;
  background-color: lightblue;
  /* 可以保留margin，或者用父容器的gap控制间隙，二选一即可 */
  /* margin: 10px; */
}

.pfp-div {
  width: 35px;
  height: 39px;
  margin: 0px;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.pfp-preview {
  width: 100%;
  border-radius: 50px;
  border-color: black;
  border-style: solid;
}

.profile-p-name-div {
  display: inline-block;
  margin: 0px;
  font-size: 10px;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  margin: auto;
}

.profile-p-name {
  margin: 0px;
}

.profile-p-desc {
  margin: 0px;
  font-size: 8px;
  color: grey;
}

.profile-p-desc-div {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  margin: auto;
}

.profile-p-stats-div {
  position: relative;
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  width: 50px;
  margin: auto;
  margin-bottom: 10px;
}

.profile-p-stats {
  margin: 0px;
  font-size: 8px;
  display: inline-block;
  color: navy;
}

.profile-p-info {
  width: 80%;
}

#follow-button {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  width: 60%;
  height: 40%;
  margin: auto;
  font-size: 8px;
  background-color: rgb(255, 0, 0);
  border-style: solid;
  border-color: black;
  border-radius: 5px;
  border-width: 1.5px;
}

HTML代码（无需修改，保持原结构即可） #

<!doctype html>
<html>
<head>
  <title>Javascript idk</title>
  <script src="java.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="profile-preview-div">
    <div class="pfp-div">
      <img src="/pfps/pic1.png" class="pfp-preview">
    </div>
    <div class="profile-p-name-div">
      <p class="profile-p-name">asd_adventure</p>
    </div>
    <div class="profile-p-desc-div">
      <p class="profile-p-desc">i really like pizza lol</p>
    </div>
    <div class="profile-p-stats-div">
      <p class="profile-p-stats">Followers: 40</p>
      <p class="profile-p-stats">Following: 30</p>
    </div>
    <button id="follow-button">Follow</button>
  </div>
  <div class="profile-preview-div">
    <div class="pfp-div">
      <img src="/pfps/pic3.png" class="pfp-preview">
    </div>
    <div class="profile-p-name-div">
      <p class="profile-p-name">deego_washere_</p>
    </div>
    <div class="profile-p-desc-div">
      <p class="profile-p-desc">i really like pizza lol</p>
    </div>
    <div class="profile-p-stats-div">
      <p class="profile-p-stats">Followers: 40</p>
      <p class="profile-p-stats">Following: 30</p>
    </div>
    <button id="follow-button">Follow</button>
  </div>
  <script>
  </script>
</body>
</html>

补充说明 #

• 如果不想用flex，也可以给.profile-preview-div设置display: inline-grid（替代inline-block+grid），这样既保留grid布局，又能让元素以行内块的形式排列，但这种方式需要注意行内元素的空白间隙问题，用父容器flex的方式更稳定。
• 用gap控制元素间隙比给每个元素加margin更高效，避免重复计算外边距重叠的问题。

内容的提问来源于stack exchange，提问作者deego