Question

我可以设置边距框的边框而不是元素框本身吗？

示例：

|-------------------------------|
|                               |
|    |--------------------|     |
|    |                    |     |
|    |---box-color: red---|     |
|                               |
|---margin-border-color: blue---|

Answer 1

如果你需要这样的话，你应该使用填充。

例如：

<div class="box-around">
    <div class="box">
         some text here
    </div>
</div>

然后你可以使用border-color - 这将作为普通边框使用。并且元素上还有padding - 以获得相同的效果。像这样。

.box {
   padding: 10px;
   border: 1px solid #ccc;
}

如果你想把这个元素集中在一起 - 那么这就是另一个问题。

您可以使用其他一些方法来居中元素。像这样：

.box-around {
    text-align: center;
}
.box {
    display: inline-block;
}

JsFiddle补充道：http://jsfiddle.net/zqr8113y/

Answer 2

您也可以使用伪元素：

.borders {
  position: relative;
  border: 5px solid #f00;
}
.borders:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 5px solid #ffea00;
}

look here for more detail

Answer 3

AFAIK，保证金没有边界。如果要将边框设置为外部框，因为要使用margin: 0 auto，则需要包装元素并将边框添加到父元素。例如：

.wrapper {
  width: 100%;
  border: 1px solid blue;
  padding: 10px;
  box-sizing: border-box;
}
.inner {
  width: 200px;
  background: red;
  margin: 0 auto;
  text-align: center;
}

<div class="wrapper">
  <div class="inner">Lorem ipsum dolor</div>
</div>

边框的边框颜色而不是元素

3 个答案: