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

【问题标题】：media query does not behave as intended when margin is added添加边距时，媒体查询的行为不符合预期
【发布时间】：2018-05-12 08:20:31
【问题描述】：

我正在尝试在框之间添加 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>

【问题讨论】：

标签： css media-queries margins

【解决方案1】：

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

* {
  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>

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

【讨论】：

请注意，Temani Afif 的回答者（我是在发布此内容后才看到的）可能是更好的选择，但我将把它作为替代方案。