在图像的列之间添加边距？

Question

我希望在三列图像之间留出5px的边距，但是每次添加边距时，第三列就会降到前两列的下方。我尝试将列的宽度减小到30％，但是它们并不完美地位于中间。我该如何解决？

html：

<div class="rows">
        <div class="column">
          <img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
        </div>
        <div class="column">
          <img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
        </div>
        <div class="column">
          <img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
        </div>
      </div>

css：

.rows {
  margin-top: 30px;
}

.column {
  float: left;
  width: 33.33%;
  margin: 5px;
}

.column img {
  width: 100%;
}

Answer 1

尝试calc()

.column {
  float: left;
  width: calc(33.33% - 10px);
  margin: 5px;
}