css - 蓝图CSS的填充问题

Question

以下标记在 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              Bye                     

现在，'Hello' 文本太靠近其容器 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>

除非它显然不起作用，你最终会在“你好”下看到“再见”列:

 Hello              
Bye

减少第二列的大小没有意义(因为我真的希望它是“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>

我错过了什么吗？

我在这里缺少什么？

Answer 1

我怀疑您没有使用 box-sizing: border-box。如果您使用它，您建议的解决方案应该有效。否则，您将需要额外级别的标记。

请记住，宽度的默认值是应用于内容，而不是边框​​，因此当蓝图提供宽度而您提供填充时，填充会添加到宽度，这是不好的。 box-sizing: border-box 指令解决了这个问题。