Nothing does the job for me. I've got two problems here:
- White space from parent div between child divs colored in blue.
- White space from body in bottom of the page dispite the colored in yellow.
The margin; 0; does the job but leaves me the mysterious white space colored in yellow at the bottom. I don't understand why yet.
Thank you for reading me! :-)
body
{
background-color: yellow;
margin: 0;
}
.parent
{
background-color: blue;
}
.enfant-un
{
background-color: orange;
height: 120px;
padding-left: 10%;
padding-right: 10%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0px;
}
.logo
{
width: 90px;
}
.logo:hover
{
opacity: 0.75;
}
.menu
{
}
.menu li
{
display: inline;
padding-right: 10px;
}
.menu li:hover
{
opacity: 0.75;
}
.illustration
{
width: 100%;
border-radius: 6px;
}
.enfant-deux
{
background-color: green;
}
.enfant-trois
{
background-color: red;
}
.enfant-quatre
{
background-color: violet;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>GBAF(Groupement Banque-Assurance Français)</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
</head>
<body>
<div class="parent">
<div class="enfant-un child">
<a href="index.php">
<img class="logo" src="images/logo.png" title="Acceuil" alt="Le logo de GBAF(Groupement Banque-Assurance Français)." />
</a>
<nav class="menu">
<?php
$autorisation = false;
if ($autorisation)
{
echo "$nom $prenom";
}
else
{
?>
<ul>
<li><a href="#" title="Créer un nouveau compte">Inscription</a></li>
<li><a href="#" title="Se connecter avec un compte existant">Connexion</a></li>
</ul>
<?php
}
?>
</nav>
</div>
<div class="enfant-deux child">
<h1>Groupement Banque-Assurance Français</h1>
<p>Présentation des partenaires</p>
<img class="illustration" src="images/illustration.jpg" alt="Bureaux de GBAF(Groupement Banque-Assurance Français)."/>
</div>
<div class="enfant-trois child">
<h2>Acteurs et partenaires</h2>
<p>Présentation des acteurs et partenaires</p>
<div class="acteur">
<img src="images/logo-acteur-1.png" alt="Acteur 1"/>
<h3>Acteur 1</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-2.png" alt="Acteur 2"/>
<h3>Acteur 2</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-3.png" alt="Acteur 3"/>
<h3>Acteur 3</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-4.png" alt="Acteur 4"/>
<h3>Acteur 4</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-5.png" alt="Acteur 5"/>
<h3>Acteur 5</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-6.png" alt="Acteur 6"/>
<h3>Acteur 6</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
</div>
<div class="enfant-quatre child">
<nav class="menu">
<ul>
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
