margin-top has no effect on text within the div

Asked

Viewed 511 times

1

I’m trying to apply margin-top in tag p of my text with the intention that it should come down, but I do not know why it is not working. Every time I apply the margin-top, the effect ends up being noticed in the div and not in the text as expected, as you can understand, I access the pits and finally to tag p to use the margin-top.

Follows Code:

@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>

Will I have to wear position to solve this?

P.S.: I read 2 similar questions right here on SO-pt, however apparently it did not apply to my specific case.

html css front-end div

2 answers

2


This happens because there was a mixture of margins content with p, you can get the full explanation here.

To solve just add overflow: auto; to container or use 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>

Regarding the second question you can open another question here on the site if others have not already opened, this helps to maintain focus and help more people.

  • It really worked, I’ll create another question if you don’t find anything on the web or even here. However, I will read the link about the merging of margin!

2

Good morning, all right? Dude, here’s what’s going on, like the DIV <p> is has the display: block;, when you apply a margin to your <p> the whole block is accompanying down, because the <p> is occupying large space in your DIV. If you take out the colors or apply different colors to each DIV, you will notice that the location of the div . content does not change, only from a space of your upper Nav. What you can do to change the position of your <p> without interfering in it, is to apply a padding because then it will give an inner space inside the tag <p> and not exterior how the margin. Only change the following attribute in your CSS code:

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

And finally, one more piece of information. If you change the display from DIV . content to display: flex; will notice that the same will work also with the margin and will not " go down " further.

Browser other questions tagged html css front-end div

You are not signed in. Login or sign up in order to post.