Mezery mezi položkami

Vraťme se ke kartám plemen. Stojí v řadě, ale dotýkají se. Mohli bychom je oddělit okraji, jako jsme to udělali u odkazů v navigační liště (každý z nich má margin-left: 1rem). Okraj ale přidá místo na jednu stranu každé položky, takže bychom dostali mezeru i před první položkou nebo za poslední, kde ji obvykle nechceme.

Flex kontejner na to má lepší nástroj: vlastnost gap (mezera). Ta nastavuje velikost mezer mezi položkami, a to jen mezi nimi, nikdy ne na krajích kontejneru:

.kontejner {
	display: flex;
	gap: 2rem;
}

Stejně jako u okrajů můžete použít jakoukoli jednotku, kterou znáte, například px nebo rem.