CSS：用边距调整框宽度？答案

【问题标题】：CSS: adjust box width with margins?CSS：用边距调整框宽度？
【发布时间】：2014-07-25 13:16:54
【问题描述】：

我有一个盒子，它的宽度是可变的，因为它取决于容器的大小。该框没有内容，因此我使用边距来相对定义其宽度，但它不起作用。这是我的代码：

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  content:"";
  border-top: 2px solid red;
  margin: -20px 0 7px -7px;
  position:absolute;
  width:auto;
}

这是我的小提琴http://jsfiddle.net/x7rrj/3/

请注意红色边框是如何在不尊重右边距的情况下超出框的，如果我将宽度设置为自动，那么红色边框根本不会显示。是否可以仅使用 CSS 来解决这个问题？

谢谢。

【问题讨论】：

你真正期待看到什么？
背景上覆盖框顶边框的红线

标签： css width margin box

【解决方案1】：

我看了看小提琴，发现顶部的红色边框没有显示。

它有一行与 padding: 0 100%; 删除该行似乎可以解决您的问题。

这是你想要的最终结果吗？

http://jsfiddle.net/z5952/

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  border-top: 2px solid white;
  content: "";
  margin: -9px 0 7px -7px;
  position: absolute;
  width: auto;
}

【讨论】：

嗯不，请再次查看我的小提琴jsfiddle.net/x7rrj/6红线显示给我。

【解决方案2】：

这是您要找的东西吗？

http://jsfiddle.net/x7rrj/16/

由于您使用position:absolute 来定位线条，您也可以使用top、right 和left 来控制位置和宽度：

.box:before {
  border-top: 2px solid red;
  content: "";

  padding: 0 100%;
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
}

【讨论】：

嗯，这里的红线还在框外。
你指的是哪个盒子？有思想家边界的那个？
是的，有金色边框的那个。但现在看来它已经修复了，我只是用 width: auto 替换了 padding ，这就成功了。谢谢你的想法。
好的，太好了。但我仍然认为调整顶部、右侧和左侧似乎是一个更明智/可读的解决方案。 jsfiddle.net/x7rrj/17
我确实做到了，请看我最后的小提琴：jsfiddle.net/x7rrj/19这就是我的意图。

【解决方案3】：

好的，感谢 Edward 给我的一个想法，我找到了答案。问题已通过将边距替换为顶部、左侧和右侧来解决。

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  border-top: 2px solid white;
  content: "";
  width: auto;
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
}

【讨论】：