Solucionado
Aula 05 - Lista e divisões de contéudos Módulo Inline e block
Me explique o que esse código faz por inteiro para que eu possa entender:
ul {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;
}Qual é a diferença entre:
width: 20%;
margin-right: 15%;
Oi, Guilherme! Tudo bem?
O código que você postou se refere à estilização (em CSS) de todas as listas não ordenadas (ul) de uma página HTML.
O "display: inline-block" faz com que aquele elemento seja exibido como um elemento de linha, mas com as propriedades de um elemento de bloco. Isso significa que o elemento será exibido em uma linha, ao lado de outros elementos, mas ainda permitirá que você defina a largura, altura, margens e preenchimentos, como se fosse um elemento de bloco.
Essa propriedade é útil quando você deseja exibir elementos lado a lado, mas ainda precisa ter a capacidade de ajustar a largura e altura desses elementos.
O "vertical-align: top" alinha o conteúdo da lista ao topo. A propriedade CSS vertical-aligné utilizada para definir o alinhamento vertical de um elemento em relação ao seu container. Quando definido como top, um elemento é alinhado verticalmente no topo do seu container. Essa propriedade é útil quando você precisa alinhar elementos verticalmente em relação a outros elementos em uma mesma linha.
O "width: 20%" define a largura da lista como 20% da largura do elemento pai. Ou seja, se a largura do elemento pai for 1000px, a largura da lista será de 200px.
Já o "margin-right: 15%" define uma margem direita de 15% em relação ao elemento pai.
A diferença entre os dois é que o "width" define a largura do elemento em si, enquanto o "margin-right" define uma margem à direita do elemento.
Espero ter ajudado, caso tenha alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!
Um forte abraço e bons estudos!