html - 无法在正确位置为元素留出边距

Question

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	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;
	position: relative;
	top: 50%;
	margin: 0;
	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>

我正在尝试添加 <p>并给它一个顶部边距，这样它的内容离画廊内容更远，但它在图像顶部给出了那个边距。

我该如何解决？如果我没记错的话，可能是 clearfix 问题，但 clearfix 没有帮助。

CodePen

Answer 1

是的，这是一个 clearfix 问题，因为它上面有 3 个 float 元素。向那些 .projects 元素添加一个包装器并清除 float 。

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	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;
	position: relative;
	top: 50%;
	margin: 0;
	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;
}
.projects-container:after {
  content: '';
  display: table;
  clear: both;
}

<main>
  <section id="gallery">
    <div class="wrapper">
      <h2>Our Gallery</h2>
      <h3>Lorem bizzle dolizzle sizzle amet</h3>
      <div class="projects-container">
        <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>
      </div>

      <p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>

    </div>
  </section>