填充内的CSS边框

Question

我有一个简单的css框：

border: 1px solid #CCC;

我正在尝试从文字左侧添加一些空格到边框。 我尝试使用margins和padding，但它总是在框外，而我希望内部有一些余量。

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

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

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>

Answer 2

试试这个，你没有正确使用填充，你只需要在左边添加一些填充：

div {
    display: inline-block;
    width: 150px;
    height: 50px;
    border: 1px solid #CCC;
    padding-left: 10px;
}

<div style="border: 1px solid #AAA">
  
  <p>
   Hey!
  </p>
  
</div>

Answer 3

你需要在div本身添加填充：

  div {
     padding-left: 5px;
    }

或添加填充到框的所有边，如下所示：

div {
 padding: 5px;
}

Answer 4

在外层 div 上再添加一个 div 和边框，向内层 div 添加内边距。

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