CSS 宽度和边距不与媒体查询相加

Question

我正在构建博客布局。目标是让内容在 window 中居中并对齐，具有最大宽度和到 window 边界的最小距离。

我已经结合使用 max-width 和媒体查询来将边距设置为特定阈值。我尝试将 max-width 和固定的 margin-left 和 margin-right 放在一起，但这失败了。

所以，我采用了下面的解决方案，其中我有一个 max-width 与 margin-left: auto; margin-right: auto 组合，另外我有一个设置 margin-left: 2em; margin-right; 2em 的媒体查询。

这大部分工作正常，但我对我必须定义的媒体查询感到非常困惑才能使其无缝工作。 CSS 在下方，您可以看到示例页面 here。

我希望我的内容使用 max-width: 55em;，媒体查询在 (max-width: 59em) 开始，边距在 2em 两侧，应该有一个无缝过渡，文本永远不要触及 window.

的边界

在下面的版本中，我到达了一个过渡点，在这个过渡点中，文本在边距开始之前接触到 window 的边缘一定大小，并且文本从边缘缩回。我计算出 55+4=59，所以在 59，我得到总共 4em 的边框，并且文本应该从那个点的边缘后退，因为我将 window 调整得更小；这不会发生。

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 59em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 59em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}

<div class="container">
  <div class="content">
    <article>
      Here is a nice long paragraph which should
      certainly hit the wrap limit.
      It should do this because it is a long paragraph,
      with more words and characters than fit in the
      maximum width configured for this page.
      I have written multiple sentences in a row, to
      ensure that this will take ample screen space horizontally.
      I am good at writing like this.
    </article>
  </div>
</div>

我想要的值如下，你可以看到一个版本here。在这里，除了媒体查询：(max-width: 80em) 之外，一切都一样。我纯粹是通过猜测和检查来到这里的。如果我向下调整 window 的大小，我会看到一个平滑的过渡，其中文本永远不会接近或触及 window 边界。

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 80em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 80em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}

<div class="container">
  <div class="content">
    <article>
      Here is a nice long paragraph which should
      certainly hit the wrap limit.
      It should do this because it is a long paragraph,
      with more words and characters than fit in the
      maximum width configured for this page.
      I have written multiple sentences in a row, to
      ensure that this will take ample screen space horizontally.
      I am good at writing like this.
    </article>
  </div>
</div>

所以，我的问题是以下一项、部分或全部：

我做错了什么？
使 80-4=55 的数学是什么？
应该如何实现这个目标？

编辑： 添加一些 gif，因为我解释不好。

这里很糟糕：请注意，有一段时间我正在调整文本在 window 边框上的位置。我不想要这个。我希望以 59em 的宽度开始的 2x2em 边距应该开始产生效果。取而代之的是，在调整大小时（也就是某些 window 大小的某些人口）期间，文本会撞到 window 边框。

这是最好的。这有一个 max-width: 80em 的媒体查询。这具有我想要的行为。看看文本是如何从不碰到 window 边界的，只是平稳地开始从边界撤退。 80em 是一个神奇的数字（至少对我来说是从桌面上的多个浏览器查看——我不知道这是否是我的问题）。更少，我让文本接近边界，然后它捕捉到我的 2em 边距。更多，而且是左对齐，而不是居中。

Answer 1

那……

* {
  box-sizing: border-box;
  /* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
}

.container {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  border: 1px solid red;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (min-width: 900px) {
  .container {
    /* something else */
  }
}

<section class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, doloremque iste sequi est autem officia asperiores, illo, vero reiciendis incidunt provident itaque laborum quidem! Aut nisi eaque a itaque numquam.</p>
</section>

可能是边框问题....

https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

What am I doing wrong here?

What is the math that makes 80-4=55?

主要问题是媒体查询使用文档的样式，而不是 container class。这意味着查询中的 1em 不同于 container div 中的 1em。例如，此代码段对文档使用的文本使用相同的样式，因此它有效。请注意，我还将正文的边距设置为 0，因为正文的边距也包含在媒体查询中。这个解决方案，我相信你会同意，不是想要的结果。

不太好的版本

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  text-align: justify;
}

@media screen and (max-width: 59em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}

body {
  margin: 0;
}

<div class="container">
  <div class="content">
    <article>
      Here is a nice long paragraph which should
      certainly hit the wrap limit.
      It should do this because it is a long paragraph,
      with more words and characters than fit in the
      maximum width configured for this page.
      I have written multiple sentences in a row, to
      ensure that this will take ample screen space horizontally.
      I am good at writing like this.
    </article>
  </div>
</div>

How should this goal be achieved instead?

相反，我会推荐 flexbox。将 container class 样式设置为

display: flex;
justify-content: center;

并将其他样式移动到 content class。将 content class 的边距设置为 auto 2em。（见下面的片段）

良好的 Flexbox 版本

.container {
  display: flex;
  justify-content: center;
}

.content {
  margin: auto 2em;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

<div class="container">
  <div class="content">
    <article>
      Here is a nice long paragraph which should
      certainly hit the wrap limit.
      It should do this because it is a long paragraph,
      with more words and characters than fit in the
      maximum width configured for this page.
      I have written multiple sentences in a row, to
      ensure that this will take ample screen space horizontally.
      I am good at writing like this.
    </article>
  </div>
</div>

CSS 宽度和边距不与媒体查询相加

CSS width and margins don't add up with media query

html

css

margin