Como retirar os espaçamentos brancos em volta da <img>, <div> principal e da div benefícios ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como retirar os espaçamentos brancos em volta da <img>, <div> principal e da div benefícios ?
Voce pode retira todas as margens e espaçamentos da pagina de forma bem simples, usando "*" com ele voçe mudará para a pagina inteira as configuraçoês , coloque na primeira linha do arquivo css.
*{
margin:0;
padding:0;
}Deu quase certo, mas entre a imagem e a descrição continua tendo o espaçamento e desconfigurou a parte da lista não ordenada (abaixo de benefícios).
Teria como mandar seu código?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Barbearia Alura</title>
<link rel="stylesheet" href="style.css">
</head>
<Body>
<img id="banner" src="banner.jpg">
<div class="principal">
<h1>Sobre a Barbearia Alura</h1>
<p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia. </p>
<p id= "missao"><em>Nossa missão é: <strong> "Proporcionar auto-estima e qualidade de vida aos clientes".</strong></em></p>
<p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes. </p>
</div>
<div class="beneficios">
<h2>Benefícios</h2>
<ul>
<li class="itens">Atendimento aos clientes</li>
<li class="itens">Espaço diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissionais Qualificados</li>
</ul>
<img src="beneficios.jpg" class="imagembeneficios">
</div>
</Body>
</html>#banner{
width: 100%;
}
.principal{
background-color:#CCCCCC;
padding: 30px;
}
h1{
text-align: center
}
p{
text-align: center
}
#missao{
font-size: 20px
}
em strong{
color: red
}
.itens{
font-style: italic
}
.beneficios{
background: #ffffff;
padding: 20px
}
h2{
text-align: center;
}
ul{
display:inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%
}
.imagembeneficios{
width: 50%
}é amigo, tentei várias formas aqui mas nao consegui tirar esse espaço ai de jeito nenhum, ele n pertence a imagem nem a div,pelas minhas pesquisas acredito que seja um espaço padrao entre uma imagem e outros elementos da página, e não achei um jeito de tirar, vou ficar te devendo essa!
Tudo bem! Obrigado por tentar !