蓝图css的填充问题

使用blueprintcss时，以下标记看起来很好：

<div class="container">
  <div class="span-12" style="background-color : cyan">
Hello
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

现在，“Hello”文本太靠近其container div的边缘，所以您需要添加一些填充，对吗

<div class="container">
  <div class="span-12" style="background-color : cyan; padding-left : 5px">
Hello
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

减小第二列的大小没有意义（因为我真的希望它是“12网格列宽”）

现在，添加另一个级别的标记工作，但这是必要的吗

<div class="container">
  <div class="span-12" style="background-color : cyan">
    <div style="padding-left : 5px">Hello</div>
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

你好
拜伊

我错过什么了吗

---

我在这里缺少什么？

我怀疑您没有使用

框大小：边框框

。如果您使用该选项，建议的解决方案应该有效。否则，您将需要额外的标记级别

---

请记住，宽度的默认值是应用于内容，而不是边框，因此当Blueprint提供宽度而您提供填充时，填充将添加到宽度，这是不好的。指令

框大小：border box

解决了这一问题。

根据您想要的结果，可能会将

border left:5px

添加到该值s specific

.container

。如果您有纯色，或者纯色具有

rgba（）

透明度，则它不会对布局的其余部分产生任何影响

.container
{
/*青色是测试颜色*/
背景色：青色；
左边框：5px；
边框颜色：青色；
边框样式：实心；
}

---

Blueprint做得很聪明，而且比我的建议测试得更好-如果这不起作用，我会使用一个内部元素来获得最佳的跨浏览器（旧IE）结果。

有必要在div中添加另一个div，这样你就永远不会遇到问题

我遵循在类填充中添加内部div的标准

.padding { padding:1.5em; }

因此，在您的代码中，如下所示：

 <div class="container">
    <div class="span-12" style="background-color : cyan">
      <div class="padding">
           Hello
      </div>
    </div>
    <div class="span-12 last" style="background-color : green">
       Bye
    </div>
</div>

你好
拜伊

.padding { padding:1.5em; }

 <div class="container">
    <div class="span-12" style="background-color : cyan">
      <div class="padding">
           Hello
      </div>
    </div>
    <div class="span-12 last" style="background-color : green">
       Bye
    </div>
</div>