HTML中的边框到边距答案

【问题标题】：Border to margin in HTMLHTML中的边框到边距
【发布时间】：2015-06-14 05:38:33
【问题描述】：

我是 HTML 编程新手。是否可以在边距而不是填充上制作边框？我需要这个只是为了设计目的。

【问题讨论】：

认为这应该被标记为CSS...
为什么要这样做？边框位于填充和边距之间。如果您不想要边距，请将边距设置为 0，这样边框就在外面。

【解决方案1】：

是否可以在边距而不是填充处设置边框？

是的。我能想到的最接近这种效果的方法是使用 CSS background-clip 属性：

background-clip: padding-box;

这会剪切元素中不被渲染到边框区域的任何背景，因此将其视为边距而不是填充。

以下是差异的示例：

div {
  border: 5px dashed #000; /* to see through border */
  background-color: #0FF; /* to show extent of background */
  padding: 5px;
  margin: 10px;
}

.adjusted {
  background-clip: padding-box; /* corrects extent of background */
}

<div>Default Border</div>
<div class="adjusted">Corrected Border</div>

在“更正”的 div 中，边框在视觉上成为边距的一部分，而不是内边距的一部分。

【讨论】：

作为记录，当我回答问题时，我将请求解释为使边框看起来像边距的一部分而不是填充的一部分。我意识到其他答案将问题解释为在周围边缘设置边框。

【解决方案2】：

将您的内边距设置为您当前的内边距 + 边距，然后将边距设置为 0 像素。这将具有相同的效果。

【讨论】：

【解决方案3】：

我认为这是不可能的，但是如果您想将边距括在边框内，那么可以有一种解决方法。用 span 包围元素并将该 span 元素的边框设置为，

.inner{
  padding: 5px;
  margin: 5px;   
}

.outer{
  border: 1px solid black;
}

<div class="outer">
  <p class="inner">Hello</p>
</div>

Here is a demo

【讨论】：

段落元素不应包含在跨度内。
@kojow7 我在回答中写了 span 而不是 div 请立即查看
@PatrickRoberts 查看我更新的答案，我在答案中写了 span 而不是 div ，这就是它没有呈现的原因
我不喜欢这种方法，因为它使用 HTML 进行样式设置，而不是按预期使用结构。 HTML 应该专门用于结构，而 CSS 应该专门用于样式。
@PatrickRoberts 我同意我的解决方案不遵循传统方式，但我想这是一个很好的开箱即用答案，可以解决具有不寻常需求的问题。