html - 为什么这两个 `` 和 `

Question

我写了这段代码，也可以在 JSFiddle 上找到:

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
  line-height: 1.6;
}

.wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  /* Not spacing to top and bottom and auto spacing to left and right*/
  padding: 0 20px;
}

div {
  margin: 10px;
  padding: 10px;
}

h1 {
  font-size: 36px;
  text-align: center;
}

h3,
p {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}

h3 {
  font-weight: 400;
  font-size: 24px;
}

p {
  font-weight: 300;
  text-align: justify;
  text-justify: auto;
}

<div class="wrapper">
  <div>
    <h1>Welcome! <span>I'm glad you're here.</span></h1>
    <h3>My name is Andrés-J. Cremades, and I'm an Interaction/UI Designer.</h3>
    <p>Usability obsessed interaction designer. Building a UX Designer career founded on strong technological knowledge. Creative and perfectionist by nature with a particular interest in graphic design and HCI with proven working team skills.
    </p>
  </div>
</div>

而且我不明白为什么 <p>和 <h3> 当浏览器窗口完全展开时元素未垂直对齐。

问题是我将最大文本宽度设置为 80 个字符并将其居中我首先写了这个并且它起作用了:

p {
  font-weight: 300;
  max-width: 80ch;
  text-align: justify;
  text-justify: auto;
  margin-left: auto;
  margin-right: auto;
}

然后我想要 <h3>元素与 <p> 的新位置垂直对齐所以我修改了这样的代码:

h3, p {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}

h3 {
  font-weight: 400;
  font-size: 24px;
}

p {
  font-weight: 300;
  text-align: justify;
  text-justify: auto;
}

我尝试设置一个 margin-left <h3> 的值它奏效了。为什么 margin-left和 margin-right设置 auto不要在 <h3> 上工作如<p> ？我做错了什么？

Answer 1

正如用户@FabioManzano 和@benvc 所指出的(请参阅问题下的评论)，问题在于此声明:

max-width: 80ch;

80ch is a font-relative length, resulting in a different max-width for those elements - affecting your margin-left: auto; and margin-right:auto; results. [@benvc]

我想将文本行长度限制在 80 个字符以下，但我必须找到另一种方法来做到这一点。

我阅读了来自 this article 的建议关于如何正确设置文本行长度限制，我使用了 px 而不是 ch。现在它们垂直对齐:

h3, p {
  max-width: 504px;
  margin-left: auto;
  margin-right: auto;
}