添加margin后Media Query布局异常，第三列盒子被挤至第二行

你猜的完全没错！问题根源就是margin会增加元素的总占用宽度——虽然你已经用了box-sizing: border-box（这个属性能把border和padding合并进width计算），但margin是元素外部的空间，不会被border-box包含。三个盒子各占33.33%宽度，再加上margin的话，总宽度就超过了父容器的100%，所以第三个盒子只能被挤到下一行。

下面给你两种靠谱的解决方案，按需选择：

方案1：用calc()精确计算宽度 #

这种方法可以保留你原有的float布局，只需要调整@media里的宽度设置，把margin的空间提前从总宽度里扣除：

修改后的CSS代码：

* { box-sizing: border-box; }
.titles { float:right; border-left: solid; border-bottom: solid; padding: 5px 10px 5px 10px; }
.borders { border-style: solid; float: left; }
p { margin:15px; margin-top:35px; }

@media (min-width: 992px) {
  .p1, .p2, .p3 {
    /* 总宽度减去两个间隔（3个盒子之间有2个10px的空隙），再平分给3个盒子 */
    width: calc((100% - 20px) / 3);
    margin-right: 10px;
  }
  /* 给最后一个盒子去掉右边距，避免总宽度多算10px */
  .p3 {
    margin-right: 0;
  }
}

原理：calc((100% - 20px)/3)会自动计算出每个盒子能占用的最大宽度，加上两个10px的margin，总宽度刚好等于父容器的100%，不会溢出。

方案2：改用Flex布局（推荐） #

Flex是现代CSS布局的首选，它能自动处理空间分配，不用手动计算宽度，代码更简洁也更好维护：

第一步：给三个盒子加一个父容器 #

修改HTML，把三个盒子放进一个container里：

<body>
  <h1>Module 2 Assignment</h1>
  <div class="container">
    <div class="p1 borders">
      <div class="titles">One</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
    </div>
    <div class="p2 borders">
      <div class="titles">Two</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
    </div>
    <div class="p3 borders">
      <div class="titles">Three</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
    </div>
  </div>
</body>

第二步：修改CSS使用Flex布局 #

* { box-sizing: border-box; }
.titles { float:right; border-left: solid; border-bottom: solid; padding: 5px 10px 5px 10px; }
.borders { border-style: solid; }
p { margin:15px; margin-top:35px; }

/* 父容器设置为Flex布局 */
.container {
  display: flex;
  gap: 10px; /* 直接设置盒子之间的间隔，不用操心margin叠加问题 */
}

@media (min-width: 992px) {
  .p1, .p2, .p3 {
    flex: 1; /* 让三个盒子平分父容器的剩余空间 */
  }
}

/* 小屏幕可以改成垂直排列 */
@media (max-width: 991px) {
  .container {
    flex-direction: column;
    gap: 20px; /* 垂直方向的间隔 */
  }
}

原理：flex:1会让每个盒子自动分配剩余空间，gap属性直接定义盒子之间的间距，完全不用手动计算宽度，布局更稳定。

内容的提问来源于stack exchange，提问作者Nim.Garcia