如何在整个页面css周围创建空白区域答案

【问题标题】：How to create white space around entire page css如何在整个页面css周围创建空白区域
【发布时间】：2021-08-05 20:11:48
【问题描述】：

我对 css 和 html 非常陌生，我正在努力做到这一点，所以在我的网站的顶部、底部和两侧都有一点空白（有点像边框）。我发现了很多关于如何删除它的问题，但没有发现如何添加它。

目前，如果我使用宽度，元素的右侧会缩小并且不会随页面扩展。

如果我使用边距属性，则只有元素的左侧进入页面内部。

任何帮助将不胜感激。

这是我的代码：

HTML -

*, *::before, *::after {box-sizing: border-box;}

* {
  margin: 0;
  padding: 0;
}

#heading {
  width: min(90%, 70.5rem);
  z-index: 1;
  width:90%;
}

.nav-list {
  position:fixed;
  width: 100%;
  display: flex;
  padding: 10px 10px;
  margin: 0 auto;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 0px 0px 10px gainsboro;
  background-color:blanchedalmond;
}

.nav-item{
  list-style: none;
  padding: 10px;
  margin-right: 50px;
  font-family: Arial, Helvetica, sans-serif;
}

.nav-item a {
  text-decoration: none;
  color: black;
  overflow:hidden;
}

.nav-item:first-child{
  margin-right: auto;
}

#imgcontainer {
  overflow:hidden;
}

#bannerimg {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 10%;
}

.intro{
  display:grid;
  grid-template-columns: 70% 30%;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.intro > div{
  background-color: grey;
  font-family: Arial, Helvetica, sans-serif;
  padding: 1em;
}

.intro > div:nth-child(odd){
  background: #ddd
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <header>
        <div id="heading">
            <navbar>
                <ul class="nav-list">
                    <li class="nav-item">
                        <h1>Rad Cafe</h1>
                    </li>
                    <li class="nav-item">
                        <a href="./index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="./about.html">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="./store.html">Store</a>
                    </li>
                </ul>
            </navbar>
        </div>
    </header>
    <div id="imgcontainer" class="container">
        <img id="bannerimg" src="./images/pexels-maria-orlova-4906513.jpg" alt="cafe">
    </div>
    <section class="intro">
        <div id="intro-grid-1" class="grid">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus deserunt obcaecati velit facilis a.
             Facere consequatur eaque beatae repellendus dicta! Maiores nulla recusandae fugit,
              nam illum soluta eius enim tenetur autem quia cupiditate ipsam tempora maxime tempore quos et veniam voluptatibus illo.
               Ratione cum sit, quia, beatae,
                minima sequi dolorem numquam ullam quidem incidunt quasi doloribus soluta vitae fugit amet quam suscipit repellendus delectus natus laudantium! Dolores, 
                quisquam maxime maiores reprehenderit optio at, voluptates aut provident est perferendis laborum rem!
        </div>
            <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil magni odit, id corporis dicta a,
                 inventore impedit quae neque obcaecati nulla itaque saepe quod dolorum. Ducimus nam iusto in nemo.
             </div>
             <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil magni odit, id corporis dicta a,
                inventore impedit quae neque obcaecati nulla itaque saepe quod dolorum. Ducimus nam iusto in nemo.
            </div>
            <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil magni odit, id corporis dicta a,
                inventore impedit quae neque obcaecati nulla itaque saepe quod dolorum. Ducimus nam iusto in nemo.
            </div>
        
    </section>  
    
</body>
</html>

【问题讨论】：

您应该将 padding 属性设置为 body body { padding: 30px; }

标签： html css

【解决方案1】：

您可以为整个正文添加边距。

body {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 20px;
  margin-left: 10px;
}

然后您将获得页面周围空间的大部分部分。但我注意到您必须将margin-right 添加为 10px 的 20px。也许是因为我正在使用在线工具查看页面。

您还可以更改nav-list 以将nav-list 添加为99% 而不是100% 的大小以使其正确对齐。你可以稍微调整一下，得到你想要的样子

.nav-list {
    width: 99%;  
}

【讨论】：

嘿伙计，这很有帮助，谢谢。我现在唯一的问题是让导航栏对其下方的横幅图像进行响应。它在左侧对齐，在右侧对齐。这可能与flex有关吗？它在调整宽度时确实会出现，但是当浏览器展开时它不会停留在同一个地方:(
我不太清楚你的意思。如果可能的话，您可以添加您所要求的屏幕截图。但是如果您询问图像的某个宽度，您可以通过更改``` #bannerimg {width: 90%;}```来更改它，但我不确定这是否是你所要求的。
感谢回复的朋友，不幸的是我似乎没有上传图片的选项。除了在右侧溢出的导航栏（相对于其下方的 img 元素），一切都彼此内联
你可以上传图片到 imgur 并把链接放在这里。顺便说一句，您的图像位于导航栏和其他内容下方的问题是什么？
我希望导航栏与以下元素对齐，包括浏览器何时展开或缩小:)

【解决方案2】：

用你的css替换并尝试

 *, *::before, *::after {box-sizing: border-box;}

* {
    margin: 0;
    padding: 0;
}

#heading {
    width: min(90%, 70.5rem);
    z-index: 1;
    width:90%;

    
}
body{margin: 10px 10px 20px 10px;   }

.nav-list {
    position:fixed;
        width: 98.2%;
    display: flex;
    padding: 10px 10px;
    margin: 0 auto;
    justify-content: flex-end;
    align-items: center;
    box-shadow: 0px 0px 10px gainsboro;
    background-color:blanchedalmond;
  
}

.nav-item{
   
    list-style: none;
    padding: 10px;
    margin-right: 50px;
    font-family: Arial, Helvetica, sans-serif;
    

}

.nav-item a {
  
    text-decoration: none;
    color: black;
    overflow:hidden;
}

.nav-item:first-child{
    margin-right: auto;
}


#imgcontainer {

    overflow:hidden;

}


#bannerimg {

    box-sizing: border-box;
    
    width: 100%;
    max-width: 100%;
    max-height: 10%;
    
}

.intro{
    display:grid;
    grid-template-columns: 70% 29%;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.intro > div{
    background-color: grey;
    font-family: Arial, Helvetica, sans-serif;
    padding: 1em;
}

.intro > div:nth-child(odd){
    background: #ddd
}

【讨论】：

非常感谢您！不幸的是，当浏览器展开后，页面不再响应

【解决方案3】：

如果您想在您的网站周围添加空格，只需使用以下代码：

body{
   padding: 20px;
}

【讨论】：

【解决方案4】：

首先，如果你想给包括导航栏在内的整个页面添加空白，那么只需添加以下代码： body { padding: 30px; }

否则，如果您想为不包括导航栏的项目添加空格，请添加以下内容： section { padding: 30px; }

此外，您的横幅图像隐藏在导航栏后面。您还必须解决这个问题。

【讨论】：

感谢朋友的回复，不幸的是我似乎没有上传图片的选项。除了在右侧溢出的导航栏（相对于其下方的 img 元素），一切都彼此内联