Estou tentando entender o comportamento do código implementado no último exercício do curso - criação da página Portfolio.
Considerando que a largura do container UL é de 720px,
considerando que este contém elementos LI com display INLINE-BLOCK,
considerando a exibição de dois elementos LI por linha,
considerando um único espaçamento de 16 px entre os dois elementos,
efetuei o cálculo da porcentagem da largura de cada um dos dois elementos da linha da seguinte forma:
(720px-16px)/2, o que resulta em 352px, que correspondem a 48,888...% da largura do elemento container.
Ocorre que para cada um dos dois elementos por linha, o html entende que a largura máxima possível é ~48,5615% (para cada elemento).
A diferença é de aproximadamente 4,75px, o que é possível observar pela soma dos valores de border+padding+largura-do-elemento , cujos valores são 301,625 + (2x8) + (2x32). Destaco que só existe margem entre os elementos. Não há margem externa. (16px computado uma única vez)
Considerando que o valor fracionário pode ser decorrência de arredondamento, ainda restam os 4px não configurados e considerados pelo html.
Utilizando o recurso "Inspecionar elemento" observa-se um espaço não configurado entre o primeiro e segundo elementos da linha que corresponde a aproximadamente 5px.
Nota: observei que quando os elementos na linha não ocupam o espaço da linha toda, o espaço que sobra sempre fica à direita dos itens (não entre eles), o que faz sentido considerando-se o fluxo normal da esquerda para a direita.
Por favor, me ajudem a entender esse comportamento: por que esse espaço está ocorrendo entre os elementos?
