[Dúvida] Aula 7 Aquecimento CSS Kai Pimenta

Bom dia gente, tudo certo?

Estou com uma dúvida que surgiu na aula 7 (propriedades) de CSS de Kai Pimenta, mais especificamente no minuto 12:52. Em teoria elu usa o “padding:10px” na tag

do html para que a opção clicável dos links seja somente sobre o texto e não no espaço entre eles. Porém fiz o teste aqui, da mesma forma que ela na aula e ainda assim, consigo clicar nos espaços entre os textos linkados. Na aula elu acaba não mostrando também se deu certo.
Queria saber de fato como resolver esse problema de não clicar nos espaços, e sim somente no texto linkado, porque aparentemente não resolveu do jeito que apareceu na aula.

é meio difícil explicar por aqui em palavras, mas se alguém que viu a aula puder me dar uma luz eu agradeço.

Abraços,

Gabriel Vespoli

5 Likes

Manda teu codigo (html e css) pro dar uma olhada . Fica melhor de te ajudar.

1 Like

Olá Gabriel, acredito que ela tenha confundido padding com margin. tenta trocar
Esse exemplo coloquei border apenas para facilitar a visualização.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .lista{
            display: flex;
            list-style-type: none;
        }
        a{
            border: 2px solid black;
            text-decoration: none;
            margin: 10px;  
            }
    </style>
</head>
<body>
    <ul class="lista">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
      </ul>
    
</body>
</html>
2 Likes

Você pode colocar o margin no a ou no li, mas é melhor no li

3 Likes

Obrigado Thiago! Foi aqui!.

1 Like

Olá, Gabriel. Uma coisa legal que tu pode dar uma olhada depois é o box model.

image

Todo elemento vai ter o seu box model.
A margin é responsável por dar espaçamento por fora do elemento.
O border é literalmente a borda do elemento.
O padding é responsável por dar um expaçamento entre o content e a bordar.
E o content é o conteúdo em si.

Então se você tem uma tag de link e quer aumentar o tamanho da área clicável, você poderá adicionar um padding. Isso é bastante importante, principalmente nos dispositivos mobile onde temos que utilizar o touchscreen. Então sempre que tiver algum link ou button, acrescente um padding pra aumentar a area de clique.

5 Likes

@ThiagoLp obrigado pelas dicas Thiago! Muito útil!

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.