html - 为什么我的 段落出现在同一行？

Question

我有一个基本网站，我正在使用 CSS 对 HTML 进行样式化。我将两个段落并排放置，它们出现在同一行上，尽管分别作为两个居中的部分。

例如:

<p>ugh</p>
<p>yay</p>

会像这样出现在网站上

ugh yay

代替

ugh

yay

段落的 CSS 是:

p {
    text-align: center;
    color: black;
    display: block;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

所有人注意:删除内联 block 并没有解决它

完整代码 CSS:https://jsfiddle.net/sprot9uh/

Answer 1

p {
  background: yellowgreen;
  text-align: center;
  color: black;
  display: block;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

.inline {
  display: inline-block;
  margin-right: 20px;
  background: yellow;
}

<p class="inline">I'm an inline block element....
</p>

<p class="inline"> me too
</p>

<p> But I'm a block level element
</p>

<p>Me too
</p>