Erro de Paragrafo no HTML e CSS!

Oi, galera eu estou com problema no meu código, não estou conseguindo colocar o comando <p> dentro do código <main> quando eu vejo o código no navegador ele não aparece

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo Parágrafos</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <img src="images/image-product-desktop.jpg" alt="perfume">
        <h3>P E R F U M E</h3>
        <p>AAAAAAA</p>
    </main>
    <h1 >Gabrielle <br>Essence Eau <br> De Parfum </h1>
</body>
</html>

CSS:

@charset "UTF-8";





body {
    background-color: #F3EAE3;
}

main {
    background-color: white;
    margin: 140px;
    border: 10px;
    border-radius: 10px;
    box-shadow:1px 1px 6px black ;
    box-sizing: border-box;
    padding:0px ; 
    height: 560px;
    width: 765px;
    margin: auto;
}

img {
    top: 0;
    left: 0;
    border-radius: 10px;
    width: 374px;

}

h3{
    padding: 10px;
	margin: -534px;
	text-align: center;
    margin-left: -360px;
    font-family:'Montserrat';font-size: 22px;;
    color: rgba(105, 105, 105, 0.822);
}

h1 {
    padding: 73px;
    margin: -548px;
    text-align: start;
    margin-left: 625px;
    font-size: 43px;
    color: rgba(0, 0, 0, 0.829);
}

p {
    padding: 73px;
    margin: -548px;
    text-align: start;
    margin-left: 625px;
    font-size: 43px;
}

Alguém sabe o ERRO?

O problema está relacionado ao uso do estilo CSS, especificamente nas margens negativas no seu código. O elemento <p> dentro de <main> está sendo deslocado para fora da área visível devido às configurações de margin.

Aqui está o que você pode fazer para corrigir isso:

  1. Evite margens negativas desnecessárias. Margens negativas podem causar elementos a saírem da área esperada.

  2. Estilize

    corretamente dentro de <main>. Ajuste os valores de margin e padding para que o parágrafo fique visível e bem posicionado.

HTML:

> <!DOCTYPE html>
> <html lang="pt-br">
> <head>
>     <meta charset="UTF-8">
>     <meta name="viewport" content="width=device-width, initial-scale=1.0">
>     <title>Exemplo Parágrafos</title>
>     <link rel="stylesheet" href="style.css">
> </head>
> <body>
>     <main>
>         <img src="images/image-product-desktop.jpg" alt="perfume">
>         <h3>P E R F U M E</h3>
>         <p>Esse é um exemplo de parágrafo dentro do elemento main.</p>
>     </main>
>     <h1>Gabrielle <br>Essence Eau <br> De Parfum </h1>
> </body>
> </html>

CSS:

> @charset "UTF-8";
> 
> body {
>     background-color: #F3EAE3;
> }
> 
> main {
>     background-color: white;
>     margin: auto;
>     border: 10px;
>     border-radius: 10px;
>     box-shadow: 1px 1px 6px black;
>     box-sizing: border-box;
>     padding: 20px; 
>     height: auto;
>     width: 765px;
> }
> 
> img {
>     display: block;
>     border-radius: 10px;
>     width: 100%;
>     height: auto;
> }
> 
> h3 {
>     text-align: center;
>     font-family: 'Montserrat', sans-serif;
>     font-size: 22px;
>     color: rgba(105, 105, 105, 0.822);
>     margin: 20px 0;
> }
> 
> h1 {
>     text-align: start;
>     margin: 20px auto;
>     font-size: 43px;
>     color: rgba(0, 0, 0, 0.829);
> }
> 
> p {
>     font-family: 'Arial', sans-serif;
>     font-size: 16px;
>     color: #333;
>     margin: 20px 0;
>     text-align: justify;
> }

Ajustes importantes:

  1. Removi margens negativas que causavam deslocamento indesejado dos elementos.

  2. Adicionei padding e margin consistentes para <p> e outros elementos.

  3. Usei display: block para a imagem, garantindo que ela respeite o fluxo de layout do documento.

Abra o navegador novamente e recarregue o arquivo. O parágrafo agora deve aparecer corretamente dentro do <main>.

1 curtida

Valeu :smiley:

Dnada mn, tmjt

1 curtida

Eu estava fazendo um projeto assim:

Com esse código

Pelo visto deu tudo certo. Se precisar de ajuda em outra coisa é só chamar.

Eu estava falando que essa imagem de cima e um projeto que estou fazendo, porem quanto eu vou ter que mudar muito o código, para ficar do jeito que eu quero mais valeu ae

Este tópico foi fechado automaticamente 3 dias depois da última resposta. Novas respostas não são mais permitidas.