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标记覆盖整个窗口。如果你希望它们更接近，你可以将边框添加到另一个元素而不是正文，并使其宽度更小。

我看到你已经有了一个容器（.container），所以你可以使用它并将边框和背景应用到它，同时添加例如width: 60%然后margin: 0 auto以使其水平居中

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用容器div来达到你想要的效果：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您需要在border而不是身体中设置background和.container。

样本：

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

<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">

Answer 4

将您的内容包装在div中，然后将边框和红色背景应用于新的div和灰色背景body

<强> HTML

<div class="container">
  <div class="wrapper">
    <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>
</div>

<强> CSS

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

.wrapper {
  border-left: 5px solid black;
  border-right: 5px solid black;
  margin: 50px 50px;
  background: #d92626;
}

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

示例：https://jsfiddle.net/parj6ep1/

Answer 5

<style>
body {
  background-color: #d92626;
  color: white;
}
.test1{
  border-left: 5px solid black;
  border-right: 5px solid black;
  width:400px;
  margin: 0 auto;
  background: gray;
}
.test {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
<body>
<div class="container">
<div class="test1">
  <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>
</div>
</body>

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

5 个答案: