Box Model: Um programador deseja construir um portfólio de fotografias na Internet. Na página principal de seu site, ele desenvolveu um grid com três imagens em cada linha, armazenada em um <div> de propriedade position igual a relative. As imagens foram inseridas com a propriedade float: left, que força imagens a se posicionar à esquerda. Ao todo, 9 imagens foram inseridas na página inicial. Quais propriedades CSS poderiam ser aplicadas às imagens para inserir um espaçamento de 10px entre as imagens?

Para criar espaçamento entre imagens em um grid onde cada imagem está com float: left, a forma mais direta é aplicar margem em todos os lados de cada imagem. Assim, haverá distância tanto na horizontal (entre imagens na mesma linha) quanto na vertical (entre as linhas).

• (a) margin-left e margin-right criam espaçamento apenas na horizontal; não garantem espaçamento entre linhas.
• (b) cria espaçamento à esquerda e acima, mas não à direita/abaixo, deixando o espaçamento inconsistente.
• (c) margin-side não existe em CSS.
• (e) cria espaçamento apenas na vertical.

Já a alternativa (d) margin: 10px 10px 10px 10px; equivale a:

$margin\text{-}top: 10px;$

$margin\text{-}right: 10px;$

$margin\text{-}bottom: 10px;$

$margin\text{-}left: 10px;$

Logo, garante 10px de afastamento em todas as direções entre as imagens.

Alternativa correta: (d).