Márgenes y relleno de los enlaces

Con flexbox colocamos los elementos de la lista en una fila y los alineamos en el eje principal. Para que el componente se parezca al diseño, falta ajustar los espacios: quitar los márgenes y el relleno de la lista y añadirlos a los enlaces.

Las cajas pueden tener espacio interior (padding, o relleno) y exterior (margin, o margen). Para establecer el mismo valor en todos los lados, podemos usar la forma abreviada:

.element {
  margin: 0;
  padding: 10px;
}

Para reproducir el diseño, podemos aplicar los márgenes tanto a los elementos de la lista como a los enlaces que contienen. El relleno, en cambio, debe aplicarse a los propios enlaces. Así aumenta el área en la que se puede hacer clic, también llamada área activa. Cuanto más fácil sea hacer clic en un enlace, más cómoda será la interfaz.

No se recomienda dar un ancho fijo a los enlaces. En la distribución general tomábamos todas las medidas del diseño, pero dentro de un componente el ancho de los elementos suele depender del contenido. Los textos de los enlaces tienen distintas longitudes y pueden cambiar con el tiempo. Si fijamos su ancho, un cambio de texto puede romper la distribución.

Pondremos a cero los márgenes y el relleno predeterminados de la lista navigation-list. Luego añadiremos márgenes y relleno a los enlaces con la clase navigation-link.