html - 如何在 CSS 中使边框更靠近文本和图像并使背景变灰？

Question

这是我所做的:

body {
  background-color: #d92626;
  color: white;
}
body {
  border-left: 5px solid black;
  border-right: 5px solid black;
  padding: 50px 50px;
}
.test {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div class="container">
  <h1 align="center">
        My text
    </h1>
  <h2 align="center">
        MORE MORE MORE<br><br><br>
    </h2>
  <img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">
</div>

现在如何将左右边框移近文本和图像，然后将左右边框之间的背景设为灰色？

Answer 1

边框放置在元素的尺寸周围，在您的例子中，body 标记覆盖了整个窗口。如果您希望它们更近，您可以将边框添加到另一个元素而不是 body，并使其宽度更小。

我看到您已经有了一个容器 (.container)，因此您可以使用它并在添加例如 width: 60% 时为其应用边框和背景然后 margin: 0 auto 使其水平居中。

body {
  background-color: #d92626;
  color: white;
}

.container {
  border-left: 5px solid black;
  border-right: 5px solid black;
  padding: 50px 50px;
  width:60%;
  margin:0 auto;
  background: gray;
}

.test {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div class="container">
  <h1 align="center">
    My text
  </h1>
  <h2 align="center">
    MORE MORE MORE<br><br><br>
  </h2>
  <img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">
</div>