Bonjour à la communauté.
Voici mon problème:
J’ai appliqué un
*{
margin: 0;
padding: 0;
}
en début de feuille.
Ensuite ma page est très simple :
<!DOCTYPE html>
<html>
<head>
<title>PAGE_TEST_2</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="page test aplats de couleurs"/>
<meta name="viewport" content="width=device-width, initial sccale=1, maxiimum scale=1">
</head>
<body>
<nav>
<a href="./les_aplats.html" target="_self">LES APLATS</a>
<a href="./les_couleurs.html" target="_self">LES COULEURS</a>
<a href="./exemples.html" target="_self">EXEMPLES</a>
</nav>
<section id="ligne_1">
<div id="aplat_rose">
<p>LES APLATS DE COULEURS FONT LA DIFFERENCE</p>
</div>
<div id="ligne1_image1">
<img src="images/volcan.jpg">
</div>
<div id="ligne1_image2">
<img src="images/cat_eyes.jpg">
</div>
</section>
<section id="ligne_2">
<div id="ligne2_image1">
<img src="images/building_rose.jpg">
</div>
<div id="aplat_vert">
<p>MONTREZ CE QUE VOUS VALEZ!</p>
</div>
<div id="ligne2_image2">
<img src="images/green_phone.jpg">
</div>
</section>
</body>
</html>
*{
margin: 0;
padding: 0;
}
@font-face {
font-family: 'stay_homeregular';
src: url('./fonts/stay_home-webfont.woff2') format('woff2'),
url('./fonts/stay_home-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'geosanslightregular';
src: url('./fonts/geosanslight-webfont.woff2') format('woff2'),
url('./fonts/geosanslight-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a{
text-decoration: none;
}
nav{
background: #FFE3E4;
text-align: center;
padding: 20px;
}
nav a{
color: #B0797B;
font-family: stay_homeregular;
font-size: 30px;
padding: 40px;
}
#ligne_1{
display: flex;
font-family: geosanslightregular;
color: white;
font-weight: bold;
}
#aplat_rose{
background: #FCC7C9;
flex: 1;
text-align: center;
height: 20em;
line-height: 20em;
}
#aplat_rose p{
line-height: 20em;
}
#ligne1_image1{
flex: 2;
}
#ligne1_image2{
flex: 1;
}
#ligne1_image1 img{
width: 100%;
height: 20em;
}
#ligne_2{
display: flex;
font-family: geosanslightregular;
color: white;
font-weight: bold;
}
#ligne2_image1{
flex: 1;
}
#ligne2_image1 img{
max-width: 100%;
height: 20em;
}
#aplat_vert{
flex: 2;
background: #68B07B;
text-align: center;
height: 20em;
line-height: 20em;
}
#aplat_vert p{
height: 20em;
line-height: 20em;
}
#ligne2_image2{
flex: 1;
}
#ligne2_image2 img{
max-width: 100%;
height: 20em;
}
#ligne1_image2 img{
max-width: 100%;
height: 20em;
}
Voici ensuite le résultat (sous firefox):
Quelqu’un peut me dire comment supprimer cette foutue marge blanche SVP 
(excusez le mauvais goût de la page, c’est une page test)
+0
-0
