如何在HTML / CSS中为页面上的所有内容设置边框/边距？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在HTML / CSS中为页面上的所有内容设置边框/边距？相关的知识，希望对你有一定的参考价值。
我想创建一个与此类似的页面。我希望此页面上的所有内容都有页边距最左侧和最右侧的边距。我应该在代码中加入什么？
我现在的代码将使段落符合我不喜欢的网页宽度。
答案
您应该为您的内容创建一个全局容器，给它一个max-width，然后将其边距设置为0 auto。
您可以尝试全屏查看以下代码段;因为我告诉.container类最大宽度为600px，左右边距将自动分配剩余的可用空间以使内容与margin: 0 auto居中
.container
max-width: 600px;
margin: 0 auto;
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
</div>以上是关于如何在HTML / CSS中为页面上的所有内容设置边框/边距？的主要内容，如果未能解决你的问题，请参考以下文章
我如何在IONIC 4中为我的所有页面设置一个通用的页眉组件？
如何在 react-static 中为每个页面生成单独的 css 文件