HTML css边距填充内容边框

Question

我的问题是什么？我找不到一个让它看起来像这样的解决方案 Hello World box我不太擅长编码，但我试图理解我做错了什么。有人可以帮助我并修复我的代码吗？

＆＃13;

＆＃13;

.mano-modelis .content {
  content: "Hello World!";
  width: 300px;
  font-size: 1em;
  color: white;
  display: block;
  text-align: center;
  line-height: 300px;
  background-color: green;
}

.mano-modelis .padding {
  color: black;
  padding: 15px;
  width: 300px;
  height: 300px;
  position: relative;
  background: black;
}

.mano-modelis .border {
  padding: 15px;
  width: 300px;
  height: 300px;
  position: relative;
}

.mano-modelis .margin {
  background: blue;
  padding: 15px;
  width: 300px;
  height: 300px;
  position: relative;
  border: 2px;
  transition: all;
}

＆＃13;

<div class="mano-modelis">
  <div class="margin">
    <div class="border">
      <div class="padding">
        <div class="content">Hello world!</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是链接图像的简化版本，我只使用了两个元素。

＆＃13;

＆＃13;

.blue {
  background: blue;
  width: 300px;
  padding: 10px;
  box-sizing: border-box;
}
.green {
  background: green;
  text-align: center;
  height: 250px;
  border: 10px solid black;
  line-height: 250px;
}

＆＃13;

<div class="blue">
  <div class="green">
    Hello world
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

它也可以用一个元素完成，如下所示：

＆＃13;

＆＃13;

.green {
  background: green;
  text-align: center;
  height: 250px;
  width: 250px;
  border: 10px solid black;
  box-sizing: boreder-box;
  line-height: 250px;
  box-shadow: 0px 0px 0px 10px blue;
}

＆＃13;

  <div class="green">
    Hello world
  </div>

＆＃13;

＆＃13;

＆＃13;

这是你的代码，修复：

＆＃13;

＆＃13;

.mano-modelis .margin {
  background: blue;
  padding: 15px;
  width: 300px;
  height: 300px;
}

.mano-modelis .content {
  font-size: 1em;
  color: white;
  text-align: center;
  line-height: 270px;
  background-color: green;
}

.mano-modelis .padding {
  color: black;
  padding: 15px;
  width: 270px;
  height: 270px;
  background: black;
}

＆＃13;

<div class="mano-modelis">
  <div class="margin">
    <div class="border">
      <div class="padding">
        <div class="content">Hello world!</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题源于外部DIV具有填充和内部DIV与内部DIV共享相同的宽度。内部DIV将在填充内部开始，因此溢出外部DIV。

如果你不需要所有这些额外的元素，这里有几个简化的解决方案。

使用outline外边框

的一个元素

＆＃13;

＆＃13;

body {
  margin: 0;
}

.mano-modelis {
  width: 300px;
  height: 300px;
  margin: 15px; /* provides buffer for outline below as outlines don't take up space. */
  padding: 15px;
  color: white;
  text-align: center;
  line-height: 300px;
  outline: 15px solid blue;
  border: 15px solid black;
  background-color: green;
}

＆＃13;

<div class="mano-modelis">Hello world!</div>

＆＃13;

＆＃13;

＆＃13;

使用::before外边框伪元素的一个元素

＆＃13;

＆＃13;

body {
  margin: 0;
}

.mano-modelis {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 15px; /* Buffer space for pseudo element */
  padding: 15px;
  color: white;
  text-align: center;
  line-height: 300px;
  border: 15px solid black;
  background-color: green;
}

.mano-modelis::before {
  content: '';
  display: block;
  z-index: -1;
  position: absolute;
  top: -30px;
  right: -30px;
  bottom: -30px;
  left: -30px;
  background-color: blue;
}

＆＃13;

<div class="mano-modelis">Hello world!</div>

＆＃13;

＆＃13;

＆＃13;

还有其他解决方案，我相信其他人会介绍。

Answer 3

我猜你是为了得到这样的东西......

＆＃13;

＆＃13;

.margin,
.border,
.padding,
.content {
  box-sizing: border-box;
}

.margin {
  padding: 15px;
  width: 300px;
  height: 300px;
  position: relative;
  background: blue;
}

.border {
  padding: 15px;
  width: 100%;
  height: 100%;
  position: relative;
}

.padding {
  padding: 15px;
  width: 100%;
  height: 100%;
  position: relative;
  background: black;
}

.content {
  text-align: center;
  line-height: 180px;
  margin: auto;
  color: white;
  padding: 10px;
  width: 100%;
  height: 100%;
  position: relative;
  background: green;
}

＆＃13;

<div class="mano-modelis">
  <div class="margin">
    <div class="border">
      <div class="padding">
        <div class="content">Hello world!</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;