内边距内的 CSS 边框

Question

我有一个简单的 css 框：

 border: 1px solid #CCC;

我正在尝试从文本左侧到边框添加一些空间。我试过 margins 和 padding 但它总是在盒子外面，而我想要一些内部空间。

我在框内的文本总是附在左侧，如何在文本和框之间添加一些边距/空间？

我有代码： https ://jsfiddle.net/z2v27rcq/ 如果有帮助的话。

原文由 Costantin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 padding ，它在边界内：

 div {
    box-sizing: border-box;
    display: inline-block;
    width: 150px;
    border: 1px solid #CCC;
    padding: 30px 20px;
}

 <div style="border: 1px solid #AAA">

  <p>
    Hey!
  </p>

</div>

原文由 Johannes 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

向外部 div 添加一个 div 和边框，向内部 div 添加 padding。

 <div style="border: 1px solid grey">
    <div style="padding: 10px;">
        <!-- Your Stuff -->
    </div>
</div>

原文由 Abdul 发布，翻译遵循 CC BY-SA 4.0 许可协议