Estoy probando algunos diseños diferentes con flexbox y tengo el siguiente problema.

Tengo una galería de imágenes con elementos flexibles configuradosflex:0 0 25%; y me gustaría agregarles 1px de margen porque el 1% es demasiado grande. Entonces me preguntaba qué debería hacer en este caso.

Adjunto el ejemplo a continuación.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 0 0 25%;
  min-height: 200px;
  background-color: red;
}


/*---------How I can add 1px to photo?-----------------*/

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>

Gracias