El tamaño de las cosas

Un elefante ocupa mucho espacio, dos elefantes ocupan mucho más ... es obvio ¿verdad? Pero también es obvio que si al elefante le ponemos un abrigo grueso, su volumen se incrementará aunque vaya uno a saber para qué habría que abrigar a un elefante.

En una página web pasa lo mismo; "algo" tiene un tamaño, ya sea porque nosotros lo hayamos establecido con width y height o bien porque "mide" eso.

El caso típico es una imagen; yo sé que esta mide exaxtamente 133x200:

Lo sé porque la medí, porque la miré en el navegador y decía que medía eso o bien porque la cargué indicando expresamente que la quería de ese tamaño.

Hasta ahí, todo bien pero empezamos a ponerle detallecitos, muchos detallecitos y, cuando queremos ubicarla, no entra en ese espacio que habíamos reservado. Algo falla y este problema sólo se resuelve con aritmética.

.estaimagen {
  background-color: #FFF;
  border: 5px solid #505961;
  box-shadow: 0 0 20px #FFF;
  height: 200px;
  margin: 20px;
  padding: 3px;
  width: 133px;
}

<img class="estaimagen" src="URL_iIMAGEN" />

¿Cuál es el tamaño final? ¿Qué espacio necesito para que entre y no se corte?

Sumamos:

si el ancho es 133
padding 3 a cada lado así que 3 + 3 = 6 => 133 + 6 = 139
border 5 a cada lado así que 5 + 5 = 10 => 139 + 10 = 149
margin 20 a cada lado así que 20 + 20 = 40 => 149 + 40 = 189

ancho + padding + border + margin = ancho real
133 + 6 + 10 + 40 = 189

Lo mismo pasará con la altura:

alto + padding + border + margin = alto real
200 + 6 + 10 + 40 = 256

¿Y la sombra? En versiones anteriores a IE9 se usan filtros que no las muestran de modo similar, son "duras" así que no las tenemos en cuenta. De todas maneras, en todos los navegadores, esas sombras también ocupan espacio; y es por eso que en este ejemplo se agrega un margen para que "haga lugar" a esa sombra. Si usáramos valores más altos, deberíamos incrementar ese margen o las sombras se cortarían.

Verificamos el calculo poniendo varias imágenes dentro de un contenedor de tamaño fijo:

<style>
  #demotamanio {
    border: 1px solid #666;
    height: 256px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 189px;
  }
  #demotamanio br {
    display:none;
  }
  #demotamanio img {
    background-color: #FFF;
    border: 5px solid #505961;
    box-shadow: 0 0 20px #FFF;
    float:left;
    height: 200px;
    margin: 20px;
    padding: 3px;
    width: 133px;
  }
</style>

<div id="demotamanio">
  <div>
    <img src="URL_IMAGEN1"/>
    <img src="URL_IMAGEN2"/>
    <img src="URL_IMAGEN3"/>
  </div>
</div>

x1 | x2 | x3

Otra vez aritmética; si cada imagen requiere 189 pxeles, dos imágenes requieren 189 x 2 = 378 y tres 189 x 3 = 567