如何为div添加保证金

Question

<div style="width: 500px;height:60px;margin: auto;">
       <div style="width: 300px;height:60px;background: red;float:left;"></div>
       <div style="width: 200px;height:60px;background: blue;float:right;">Some great text here</div>

</div>

如何通过CSS代码在文本中添加20像素的边距？我尝试过

   padding-left: 20px;

但这将使第二个块下降。

P.S。 span标签不是一个选项，我不想只为文本创建另一个类。

Answer 1

将box-sizing: border-box;添加到两个元素或父元素中，甚至可以将其添加到body中。

box-sizing定义如何计算元素的大小。 border-box表示内容宽度，边框宽度和边距/填充宽度之和等于定义的width。 相反，使用content-box意味着width仅定义内容宽度。