Ao definir um padding para uma ancora dentro de uma div, percebi que ela passou um pouco da margem, como se estivesse sobrepondo o elemento pai, algo estranho pois defini o box-sizing como border-box.
Meu HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- FONTES DO GOOGLE -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>OptimusTech</title>
</head>
<body>
<header class="header">
<nav class="navbar">
<div class="navbar__">
<img src="assets/logo.png" alt="Logo OptimusTech" class="navbar__logo">
<h1 class="navbar__title">OptimusTech</h1>
</div>
<div class="navbar__menu">
<ul class="navbar__menu__list">
<li class="navbar__menu__list__item"><a href="#" class="navbar__menu__list__item__btn">Home</a></li>
<li class="navbar__menu__list__item"><a href="#" class="navbar__menu__list__item__btn">Produtos</a></li>
<li class="navbar__menu__list__item"><a href="#" class="navbar__menu__list__item__btn">Recursos</a></li>
<li class="navbar__menu__list__item"><a href="#" class="navbar__menu__list__item__btn">Sobre nós</a></li>
</ul>
</div>
<!-- NO FIGMA APARECE UMA LOGO POREM O EXPORT NÃO FUNCIONA.
DEFINI APENAS UMA DIV COM AS MESMAS PROPORÇÕES DA LOGO! -->
<div class="navbar__logo2"></div>
<div class="navbar__btn">
<a href="#" class="navbar__btn__btn">Entrar</a>
<a href="#" class="navbar__btn__btn2">Cadastrar</a>
</div>
</nav>
</header>
</body>
</html>
Meu CSS Global:
@import url('components/navbar.css');
:root {
--primary-color: #3A404E;
--secondary-color: #667085;
--white: #FFFFFF;
--bg-btn: #8E2424;
}
* {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
margin: 0;
padding: 0;
box-sizing: border-box;
}
Meu CSS do navbar:
.header {
padding: 1.125rem 5rem;
border: 1px solid blue;
}
.navbar {
display: flex;
align-items: center;
padding: 0 2rem;
width: 100%;
height: 100%;
border: 1px solid red;
}
.navbar__ {
display: flex;
align-items: center;
}
.navbar__logo {
width: 27px;
height: 27px;
}
.navbar__title {
padding-left: .5rem;
font-size: 18px;
font-weight: 500;
color: var(--primary-color);
}
.navbar__menu {
margin-left: auto;
}
.navbar__menu__list {
display: flex;
list-style-type: none;
}
.navbar__menu__list__item__btn {
text-decoration: none;
font-weight: 500;
color: var(--secondary-color);
padding-right: 2rem;
}
.navbar__logo2 {
width: 142px;
height: 32px;
margin: 0 auto;
}
.navbar__btn {
margin-left: auto;
gap: .5rem;
}
.navbar__btn__btn {
color: var(--secondary-color);
font-weight: 500;
text-decoration: none;
padding: .625rem 1.125rem;
}
.navbar__btn__btn2 {
color: var(--white);
font-weight: 500;
text-decoration: none;
background-color: var(--bg-btn);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
border-radius: 8px;
padding: 2.625rem 1.125rem;
}
Percebi o problema quando coloquei o ultimo padding do meu codigo CSS do navbar. Era pra ser apenas .625rem em vez de 2.625rem, porém fiquei intrigado com essa situação e estava tentando resolver, porém sem sucesso.
As bordas coloquei para me auxiliar visualmente.
Detalhe: os códigos CSS estão em arquivos diferentes porém importei no meu arquivo global. A titulo de teste também tentei definir um seletor global contendo apenas o box-sizing como border box no meu arquivo CSS do navbar mas sem sucesso.
