1

Estou tentando aplicar margin-top na tag p do meu texto com a intenção que ele desça, porém não sei por qual motivo isso não está funcionando. Toda vez que aplico o margin-top, o efeito acaba sendo notado na div e não no texto como esperado, como poderão perceber, eu acesso as boxes e por fim a tag p para usar o margin-top.

Segue Código:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

main {
	width: 100%;
	height: auto;
	background-color: #ddd;
}

header {
	margin: 0;
	position: relative;
	height: 94px;
}

nav {
	margin: 0;
	position: absolute;
	right: 100px;
	top: 0;
}

ul {
	list-style: none;

}

li {
	display: block;
	float: left;
	margin-top: 0;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 25px;
	padding-top: 20px;
	padding-bottom: 20px;
}

li:hover {
	border-top: 3px solid #b51e1e;
	border-bottom: 3px solid #b51e1e;
}

.container {
	position: relative;
	clear: both;
	width: 100%;
	height: 463px;
	background-color: #ccc;
}

.content {
	margin: 0 auto;
	width: 80%;
	height: 100%;
	background-color: bisque;
}

.container .content {
	color: #fff;
	font-size: 45px;
	white-space: nowrap;
	font-weight: bold;
	letter-spacing: 0px;
	text-align: center;
}

.container .content p {
	margin: 0;
	padding: 0;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta name="viewport" content="width-device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="_css/style.css">
	<title>Título</title>
</head>
<body>
	<main>
		<header class="header">
			<nav>
				<ul>
					<li>HOME</li>
					<li>SOBRE NÓS</li>
					<li>EQUIPE</li>
					<li>ATUAÇÃO</li>
					<li>CONTATO</li>
				</ul>
			</nav>
		</header>
		<div class="container">
			<div class="content">
				<p>O SUCESSO DA SUA EMPRESA<br/> DEPENDE DE BONS JULGAMENTOS</p>
			</div>
		</div>
		<div class=""></div>
		<div class=""></div>
		<div class=""></div>
		<footer class=""></footer>
	</main>
</body>
</html>

Será que terei que usar position para resolver isso?

P.S.: Li 2 perguntas semelhantes aqui mesmo no SO-pt, no entanto aparentemente não se aplicava ao meu caso específico.

2 Respostas 2

2

Isso acontece porque houve uma mesclagem de margens ou seja content com p, você poderá obter a explicação completa aqui.

Para resolver basta adicionar overflow: auto; ao container ou usar padding-top...

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

main {
	width: 100%;
	height: auto;
	background-color: #ddd;
}

header {
	margin: 0;
	position: relative;
	height: 94px;
}

nav {
	margin: 0;
	position: absolute;
	right: 100px;
	top: 0;
}

ul {
	list-style: none;

}

li {
	display: block;
	float: left;
	margin-top: 0;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 25px;
	padding-top: 20px;
	padding-bottom: 20px;
}

li:hover {
	border-top: 3px solid #b51e1e;
	border-bottom: 3px solid #b51e1e;
}

.container {
	position: relative;
	clear: both;
	width: 100%;
	height: 463px;
	background-color: #ccc;
    overflow: auto;
}

.content {
	margin: 0 auto;
	width: 80%;
	height: 100%;
	background-color: bisque;
}

.container .content {
	color: #fff;
	font-size: 45px;
	white-space: nowrap;
	font-weight: bold;
	letter-spacing: 0px;
	text-align: center;
}

.container .content p {
	margin-top: 30px;
	padding: 0;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta name="viewport" content="width-device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="_css/style.css">
	<title>Título</title>
</head>
<body>
	<main>
		<header class="header">
			<nav>
				<ul>
					<li>HOME</li>
					<li>SOBRE NÓS</li>
					<li>EQUIPE</li>
					<li>ATUAÇÃO</li>
					<li>CONTATO</li>
				</ul>
			</nav>
		</header>
		<div class="container">
			<div class="content">
				<p>O SUCESSO DA SUA EMPRESA<br/> DEPENDE DE BONS JULGAMENTOS</p>
			</div>
		</div>
		<div class=""></div>
		<div class=""></div>
		<div class=""></div>
		<footer class=""></footer>
	</main>
</body>
</html>

Em relação a segunda pergunta você pode abrir um outra questão aqui no site caso outros já não tenham aberto, isso ajuda a manter o foco e ajudar mais pessoas.

1
  • Realmente funcionou, irei criar outra pergunta caso não ache nada na web ou até mesmo por aqui. Porém, irei dar uma lida no link sobre a mesclagem de margem que me passou! 16/08/2019 às 13:44
2

Bom dia, beleza ? Cara, o que está acontecendo é o seguinte, como a DIV que o <p> está tem o display: block;, quando você aplica uma margin no seu <p> o bloco todo está acompanhando para baixo, até porque o <p> está ocupando grande espaço de sua DIV. Se você tirar as cores ou aplicar cores diferentes para cada DIV, vai reparar que o local da div .content não muda, apenas da um espaço de sua nav superior. O que você pode fazer para alterar a posição de seu <p> sem interferir nisto, é aplicar um padding pois ai ele dará um espaço interior dentro da tag <p> e não exterior como funciona o margin. Só mudar o seguinte atributo em seu código CSS:

.container .content p {
    margin: 0;
    padding-top: 30px;
}

E por fim, mais uma informação. Caso voce altere o display da DIV .content para display: flex; vai reparar que a mesma vai funcionar também com o margin e não irá " descer " mais.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .