网站上<p>的边距是相同的代码，但看起来不同</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; }，您会看到段落确实延伸到边缘，但文字并未填满所有可用空间。

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

Answer 4

由于你只有一个小文本，所以使用一个狭窄的段落会更好看，如下所示：

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

您将始终拥有相同的宽度，居中，并且文本将显示在＆＃34;就像在书中一样＃34;