Question

Div with class＆＃39; post-subtitle＆＃39;应该有50px的底部边距但是，它没有在页面上显示/可见。它的定义如下：

.post-subtitle{  margin: 50 0 50; }

为什么所有其他人的利润率都是正确的，但是对于这个div来说是最低的？

JsFiddle

HTML代码：

 <section >
        <div class='post'>
          <div class='post-title'> Title fo post 1</div>
          <div class='post-subtitle'>
            <div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div>
            <div class='added-at'>10:10:00 12/12/2014</div>
          </div>
          <div class='post-body'>

            <p>Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body </p>        
          </div>      
        </div>      
        <div class='post'>
          <div class='post-title'> Title fo post 1</div>
          <div class='post-subtitle'>
            <div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div>
            <div class='added-at'>10:10:00 12/12/2014</div>
          </div>
          <div class='post-body'>
            <p>Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body </p>
            Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body
          </div>      
          <div class='post-read-more blue'>Read More ...</div>          
          <div class='post-share-it'>
            <img src="images/social-facebook.png" class="share-it">
            <img src="images/social-twitter.png" class="share-it">
            <img src="images/social-google.png" class="share-it">
            <img src="images/social-linkedin.png" class="share-it">
          </div>
        </div>

        <div class='post'>
          <div class='post-title'> Testing icons</div>
          <div class='post-subtitle'>
            <div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div>
            <div class='added-at'>10:10:00 12/12/2014</div>
          </div>
          <div class='post-body'>
            <i class="fa-rss">AAAA</i> 
            <i class="fa-rss-square">BBBB</i> 
          </div>      
        </div>                                 
      </section>

CSS代码：

 .post-read-more{    
    font-family: "Verdana", sans-serif;  
    font-size: 10px;
    margin: 10px 0px;
  }

  .post-share-it{
    margin: 10px 0px 30px;
  }

  .added-by {
    float: left;
    font-size: 10px;
  }

  .added-at {
    float: right;      
    font-size: 10px;
  }

.post-title {
  /*  padding: 0 10px;  */
  font-family: "source-serif-pro",Georgia,Times,"Times New Roman",serif;
  font-size: 30px;   
}

  .post-subtitle{
    margin: 50 0 50;    
  }

  .post-body{
    margin: 10px 0px;
    box-sizing: border-box; 
    width: auto;
    font-family: "Verdana", sans-serif;  
    font-size: 10px;  
    clear: both;
    line-height: 20px;
}

.share-it
{
  /* width: 24%; */
}

.subsection-title{  
  font-family: "Verdana", sans-serif;
  font-size: 12px;
  font-weight: bold;  
  background-color: yellow;
  width: 100%;  
}

/* input test formating */
.form-group{
  margin: 5px 0px 15px;
}

.form-control{
  font-size: 12px; 
  height: 25px;
}

.input-group-addon{
  font-size: 12px; 
  background: blue;
  padding: 3 3;
}


section{
  padding: 10px;
  width: 700px;
  /*  display: block;  */
  background-color: red;
  float: left;
  box-sizing: border-box; 
}

Answer 1

在你的css中添加： -

.post-subtitle:after {
    clear: both;
    content: "";
    display: block;
}

DEMO

并且评论在50之后添加px。

Answer 2

updated demo

 .post-subtitle{
    margin: 50px 0 50px;
    /*  width: auto;  */
  }

Answer 3

.post-subtitle {
    display: block;
    margin: 50px 0 50px;
}

Answer 4

对我而言，一旦你添加了px，我就会工作，我会留下一个更新的jsfiddle

JsFiddle

.post-subtitle{  margin: 50px 0 50px 0; }

但是，如果你想添加空格你不应该在元素的边缘做，你应该在它的填充中进行，因为当你在页面上使用更多元素时，最好稍后控制，所以我推荐这段代码，它会给你更好的结果，

.post-subtitle{ margin: 0px; padding: 50px 0 50px 0; }

干杯

底部边距不适用于html页面

4 个答案: