浮动左右比包装div大？

Question

我正在尝试在我的电子邮件模板中创建彩色列部分.我遇到的问题是包含所有电子邮件内容的内容包装器是根据下面的代码设置的.同样,包括浮动列CSS.

#content {
  background-color: white;
  margin: auto;
  width: 600px;
  color: #888;
  font-size: 12px;
  border-radius: .6em .6em 0em 0em;
  box-shadow: 0px 0px 15px 0px #555;
}
.blueLeft {
  background-color: #33ccff;
  float: left;
  display: block;
  width: 300px;
  padding: 20px;
  font-size: 16px;
}
.blueRight {
  background-color: #33ccff;
  float: right;
  display: block;
  width: 300px;
  padding: 20px;
  font-size: 16px;
}
<div id="content">
   <div class="blueLeft">
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p> 
   </div>
   <div class="blueRight">
      <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p> 
   </div><div class="clearFloat"></div>
</div>

如您所见,内容包装器有一个width: 600px;,每列都是300px.那么你会期望列将填充包装器宽度的100%,其间没有空间.将宽度设为50%是同样的问题.所以,不知何故,#content显示小于它应该.

如何编辑它以使每列真正占据内容宽度的50%？

结果是这样的:

Answer 1

这是因为你有宽度和填充.

如果添加box-sizing: border-box;到.blueLeft和.blueRight它应该解决您的宽度问题.

有关其工作原理和方式的更多信息,请参阅CSS Box模型的MDN文档.