HTML div não esta dando margin

Natanael Marrafon Rocha · 27 de abril de 2019

Estou fazendo um trabalho do meu curso e estou com uma problema no código, eu criei uma section, e dei a ela uma largura e uma altura, dentro dela criei as div, e dei a div uma largura e um tamanho também, só que a primeira div que fica na section quando eu dou margin para ela vir para baixo move a section inteira apenas a partir da segunda div que movela ela sem mover a section, coloquei background nas div para ver elas, e na primeira div coloquei um titulo h1 e não funciona o line-heigth, só que se eu colocar o container para flutuar a esquerda movem as divs... o que eu faço é algum erro de semântica ? olhem meu codigo o que fiz de errado ?

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>RAFTING</title>
		<link href="css/estilo.css" rel="stylesheet" type="text/css"/>
	</head>
<body>
	<header id="header">
		<figure id="logo">
			<img src="imagens/logo.png"/>
		</figure>
		<nav id="nav">
			<a href="#">HOME</a>
			<a href="#">ATIVIDADES</a>
			<a href="#">TREINAMENTO</a>
			<a href="#">PACOTES</a>
			<a href="#">CONTATO</a>
		</nav>
	</header>
	<section id="container">
		<div id="titulo">
			<h1>PRINCIPAIS ATIVIDADES</h1>
		</div>
		<div id="rafting">
		
		</div>
	</section>
</body>
</html>

CSS

*{
	padding:0;
	margin:0;
	text-decoration:none;
	list-style:none;
}

body{
	background:url(../imagens/foto1.jpg) no-repeat center top fixed;
}

#header{
	width:100%;
	height:90px;
	background:white;
	margin:40px auto;
}

#logo{
	float:left;
	position:relative;
	bottom:30px;
	left:100px;
	
}

#nav{
	width:800px;
	height:90px;
	float:right;
	line-height:90px;
}

#nav a{
	margin-left:30px;
	font:normal 18px arial;
	color:#333333;
}

#container{
	width:1000px;
	height:880px;
	margin:auto;
	background:white;
}

#titulo{
	width:1000px;
	height:50px;
	text-align:center;
	background:yellow;
}

#titulo h1{
	font:normal 18px arial;
	color:#333333;
}

#rafting{
	width:1000px;
	height:200px;
	background:red;
	margin:20px 0 0 0;
}

DiF · 27 de abril de 2019

@Natanael Marrafon Rocha Olá, não ficou muito claro o que você tentou fazer ali.

Pelo print, você quer por os dois elementos div(vermelho e amarelo) lado a lado?

O que exatamente você quer fazer?

Natanael Marrafon Rocha · 27 de abril de 2019

5 horas atrás, DiF disse:

@Natanael Marrafon Rocha Olá, não ficou muito claro o que você tentou fazer ali.

Pelo print, você quer por os dois elementos div(vermelho e amarelo) lado a lado?

O que exatamente você quer fazer?

O div que esta em amarelo quando eu do margin nele ele não desce só apenas quando do a margin na div que esta em vermelho que é a segunda div que desce, quando tento dar margin na div amarela desce o conteudo inteiro, e mais uma pergunta a semantica do css minha esta certa ?

GabrielSennaMs · 27 de abril de 2019

@Natanael Marrafon Rocha O que está acontecendo é o colapso de margem, as margens superior e inferior dos elementos às vezes são recolhidas em uma única margem que é igual à maior das duas margens.

Nesse caso para evitar que a margem do '#container" entre em colapso com a margem do "#titulo" você pode usar o