CSS question: three equally wide divs (33.3%) with two 2px gaps between them

<div id="outer-one">
   <div id="inner-one"></div>
</div>

<div id="outer-two">
   <div id="inner-two"></div>
</div>

<div id="outer-three">
  <div id="inner-three"></div>
</div>

* { /* to reset all padding and margin */
margin: 0;
padding: 0;
}

#outer-one, #outer-two, #outer-three {
float: left;
width: 33.3%;
margin: 0;
padding: 0;
background: #000;
height: 200px;
}

#inner-one, #inner-two, #inner-three {
width: 100%;
height: 196px;
margin: 2px;
background: #fff;
}

#inner-one, #inner-two, #inner-three {
height: 196px;
margin: 2px;
background: #fff;
}