网站上 <p> 的边距是相同的代码，但看起来不同

Question

在我正在构建的网站上，有些页面的文本一直延伸到边缘。我已经比较 HTML 很久了，但看不出我做错了什么。也许它在 CSS 中？有人看到发生了什么事吗？我尝试刷新浏览器并清除缓存。

为什么 p 仅在我的某些网页上延伸到边缘？当 HTML 看起来一样时？

<div id="wrapper3">
<div id="portfolio" class="container">
<div class="title">
<h2></h2>
<span class="byline"><!--Integer sit amet pede vel arcu aliquet pretium--></span> 
<br>
<p></p>
<p></p>
</div>
</div>

Answer 1

尝试像这样添加一些左右填充：

我用的是：

padding: 8em 2em;

这意味着，8em 顶部和底部填充以及 2em 左侧和右侧填充

Answer 2

这只是因为文本居中。有些文本行在不同的地方断开，因此一行的长度会有所不同。除了这个居中的文本，我看不出有什么区别。

尝试慢慢调整浏览器的大小，您会看到页边距增加（或减少），直到一个字跳到另一行，页边距就消失了。

你可以试试：

text-align: justify;
text-align-last: center;

这会在字词之间添加略小或大的空格，使文本填满整行。最后（较短的）一行将居中，（但在 Safari 上不是）。

关于这个主题还有其他问题。你可以自己看看：

How to Center-Justify text in CSS?

Answer 3

由于您使用的是居中对齐的文本，因此视觉宽度会有所不同，因为有些行会比其他行长一点或短一点，具体取决于其中使用的字词。如果您设置 p { background: red; }，您会看到段落确实延伸到边缘，但文本没有填满所有可用空间 space。

一个好的解决方法是在 <p> 上使用填充来强制在边缘上 space，但即使那样也不是万无一失的。您可以使用 text-align: justify; 强制行占用所有可用的 space，但较短的行将左对齐而不是居中对齐。

Answer 4

因为你只有一点点文字，所以用一个窄段落看起来会好得多，像这样:

p {
    line-height: 180%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    width: 600px;
}

您将始终具有相同的宽度，居中，并且将显示文本"as in a book"

网站上 <p> 的边距是相同的代码，但看起来不同

Margins of <p> on website are same code but look different

html

css

mobile-website