添加边距时，媒体查询的行为不符合预期

Question

我正在尝试在框之间添加 10 像素的边距并保留其预期的媒体查询值。但是当它被添加时，第三个盒子被推到第二行，我相信它会在盒子的宽度上增加更多的像素，但我不知道如何让它自动缩放。

* {
 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 {
  width:33.33%;
 }
 .p2 {
  width:33.33%;
 }
 .p3 {
  width:33.33%;
 }
}

<html lang="zxx">
  <head>
    <meta charset="utf-8">
    <meta name ="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="module2.css">
    <title>Module2-Solution</title>
  </head>

  <body>

    <h1>Module 2 Assignment</h1>
    <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>

  </body>
</html>

Answer 1

假设您希望在宽屏幕上的方框之间有一些 space，您需要做的就是稍微减小它们的宽度。

* {
  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 {
    width: calc(33.33% - 7px);
  }
  .p2 {
    width: calc(33.33% - 7px);
    margin: 0 10px;
  }
  .p3 {
    width: calc(33.33% - 7px);
  }
}

<h1>Module 2 Assignment</h1>
<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>

但这可能是我误解了你的问题；如果是这样，请告诉我！

添加边距时，媒体查询的行为不符合预期

media query does not behave as intended when margin is added

css

margins

media-queries