0
ne peut pas donner une marge à un élément au bon endroit
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
////////////* CSS reset end *////////////////
body{
background: #fff;
}
h1,h2,h3,h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
p,a {
font-family: 'Open Sans', sans-serif;
}
header {
background: #fff;
padding: 20px 0;
position: fixed;
top:0;
width:100%;
z-index: 1;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
*{
box-sizing: border-box;
outline: none;
}
header:after{
content: "";
display:table;
clear:both;
}
.wrapper {
width: 96%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2%;
}
div#logo {
background: url(img/logo.png) no-repeat;
width: 79px;
height: 28px;
float: left;
}
header nav {
float:right;
}
header nav li a {
color:#606060;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size:12px;
}
header nav h2 {
height: 0;
text-indent: -10000px;
}
header nav li {
float: left;
margin-left: 22px;
margin-top: 8px;
}
#main-banner {
background: url(img/2.jpg) no-repeat center center ;
background-size: cover;
height: 80vh;
text-align: center;
}
.banner-overlay {
text-align: center;
\t position: relative;
\t top: 50%;
\t margin: 0;
\t transform: translatey(-50%);
}
h1 {
margin-top: 20px;
color: #fff;
text-transform: uppercase;
font-size: 72px;
}
.banner-overlay .after-welcome {
color: #fff;
font-size: 24px;
margin-top: 30px;
margin-bottom: 30px;
padding: 0 20%;
font-family: 'Open Sans', sans-serif;
}
.btn {
/* background: #bf8040;*/
background: linear-gradient(to bottom, #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%);
color: #fff;
display: block;
padding: 25px 20px;
width: 220px;
margin: 0 auto;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
}
section {
text-align: center;
padding: 125px 0;
}
#gallery {
background: #dfdfdf;
}
h2 {
color:#282828;
margin-top: 10px;
font-size: 45px;
}
h3 {
color:#777;
font-weight: 400;
font-size: 20px;
margin-top:20px;
margin-bottom:75px;
}
.projects {
background: #fff;
}
section:after{
content: "";
display:table;
clear:both;
}
.gallery-image {
float: left;
width: 33.333%;
padding-left:1.5%;
padding-right:1.5%;
text-align: center;
}
#gallery img{
width: 100%;
height: auto;
}
.gallery-image a {
display: block;
background: white;
}
.img-text {
background: white;
padding: 20px;
}
.img-text p{
font-size: 14px;
color:#777;
margin-top:5px;
}
.margin-top {
margin-top: 20px;
}<main>
<section id="gallery">
<div class="wrapper">
<h2>Our Gallery</h2>
<h3>Lorem bizzle dolizzle sizzle amet</h3>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<div class="projects">
<div class="gallery-image">
<a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
<div class="img-text">
<h4>A project</h4>
<p>Some text</p>
</div>
</div>
</div>
<p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
</div>
</section>Je suis en train d'ajouter un <p> et lui donner une marge de haut, de sorte que le contenu est plus loin de le contenu de la galerie, mais il donne cette marge en haut des images.
Comment dois-je résoudre ce problème? Peut-être que c'est un problème de clearfix si je ne me trompe pas, mais le clearfix n'a pas aidé.
Vous devriez mettre votre réponse dans le contexte de la question, en soi, il n'est pas clair comment il répond à la question. – Adam
Je ne vois pas pourquoi il est préférable de copier l'extrait complet sans plus d'explications que d'extraire la bonne partie. – llobet