margin-right parece maior do que o margin-bottom

Olá, Jacqueline!

Nesse caso aí, não precisaria definir o margin-right, já que configuramos para flutuar à esquerda (float:left), a largura para 310px e informamos o box-sizing:border-box. Dessa forma, tudo está vinculado e relativo à esquerda.

Quanto ao "normal", é você que escolhe... rsrsrs. Não precisa ser, necessariamente, centralizado... Vai da imaginação do webdesign. hehe

Manoel, ela está se referindo à resposta dada pelo autor. O autor não utilizou float para as figuras , na verdade ele utilizou display: inline-block;.

Jacqueline, você está completamente certa! Tem um olho muito bom. Eu achei que era ilusão de ótica, mas quando fui verificar os pixels de distância através do Gimp, realmente existe uma distância de 20 pixels entre um elemento e outro aos lados, já em cima e embaixo a distância está correta (16px).

Fiquei mais de uma hora tentando analisar o inspetor de elementos pra encontrar o motivo, quando simplesmente pensei que devia ser uma particularidade do inline-block já que quando utilizei a propriedade float: left para realizar o exercício isto não ocorreu. Pesquisei na internet e encontrei.

Acontece que a propriedade existe para tratar de elementos que continuam na linha por exemplo, eu estou escrevendo e aparece inline-block esse cara aqui << ele é inline pois permanece no fluxo sem quebrar a linha, mas block pra poder permitir que aumente seu tamanho por exemplo, enfim, isso você provavelmente já sabe. Mas o ponto é que, se ele é um elemento inline seu objetivo é se comportar mais que uma palavra no meio do texto, por isso ele automaticamente terá um espaço entre os elementos.

Existem algumas maneiras de contornar isto bem descritas no site CSS-Tricks. O site é em inglês mas vale a pena conferir.

Uma das maneiras mais simples é remover os espaços entre o fim de um li e o começo de outro na marcação HTML isto da certo pois é como se você não tivesse espaço entre uma palavra e outra, então ficariam juntas:

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

ou

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

Adicionando comentáios:

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

Simplesmente removendo as tags de fechamento (o navegador vai saber fechar pra você):

<ul>
  <li>one
  <li>two
  <li>three
</ul>

Existem mais algumas maneiras, visite a página pra dar uma olhada.