Seguindo o raciocínio do Gui de que as medidas do padding devem ser em % para que seja proporcional ao tamanho da tela do equipamento, porque o mesmo raciocínio não vale para o gap? O gap não aceita porcentagens? E neste caso, o valor de 80px não ficaria muito maior numa tela de celular, por exemplo?
Olá Daniel! Tudo bem?
A sua dúvida é bastante pertinente e é ótimo ver que você está pensando sobre a responsividade e como diferentes unidades de medida afetam o design em diferentes dispositivos.
O padding é frequentemente definido em porcentagens para garantir que o espaçamento seja proporcional ao tamanho do elemento pai, o que ajuda a manter a consistência visual em diferentes tamanhos de tela. Isso é muito útil em layouts responsivos, onde queremos que o espaçamento se ajuste automaticamente conforme o tamanho da tela muda.
Já o gap, que é usado em layouts de grid ou flexbox para definir o espaçamento entre os itens, pode ser definido em pixels ou outras unidades como em, rem, etc. A razão pela qual o gap é frequentemente definido em pixels é que ele é usado para espaçar elementos que já têm um tamanho definido e queremos que o espaçamento entre eles seja consistente, independentemente do tamanho da tela.
É verdade que um gap de 80px pode parecer grande em uma tela pequena, como a de um celular. Nesse caso, você pode considerar o uso de media queries para ajustar o gap em dispositivos menores. Por exemplo:
.cabecalho__menu {
display: flex;
gap: 80px;
}
@media (max-width: 600px) {
.cabecalho__menu {
gap: 20px; /* Ajuste o valor conforme necessário */
}
}
Dessa forma, você pode manter o espaçamento consistente em telas maiores e ajustá-lo para ser mais apropriado em telas menores.
Espero ter ajudado. Conte com o apoio do fórum!
Abraços e bons estudos!