kein Raum zwischen Childs in der Klasse in css

Question

Ich habe diesen Code in html

<div class="small_world_news"> 
 
    <div class="small_world_news_article_box"> 
 
    <div> 
 
     <img class="small_picture_world_news" src="http://placehold.it/100x100"> 
 
     <h4 class="small_title_world_news"> Doors open to Japan's new 30B industry </h4> 
 
     <ul class="author_etc"> 
 
     <li>December 14, 2016</li> 
 
     <li> 
 
      <div class="first">by</div> 
 
      <div class="blue">John Doe</div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <img class="small_picture_world_news" src="http://placehold.it/100x100"> 
 
     <h4 class="small_title_world_news"> Doors open to Japan's new 30B industry </h4> 
 
     <ul class="author_etc"> 
 
     <li>December 14, 2016</li> 
 
     <li> 
 
      <div class="first">by</div> 
 
      <div class="blue">John Doe</div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <img class="small_picture_world_news" src="http://placehold.it/100x100"> 
 
     <h4 class="small_title_world_news"> Doors open to Japan's new 30B industry </h4> 
 
     <ul class="author_etc"> 
 
     <li>December 14, 2016</li> 
 
     <li> 
 
      <div class="first">by</div> 
 
      <div class="blue">John Doe</div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Und ich brauche 20px Raum zwischen firstarticle-secondarticle und secondarticle-thirdarticle. Auch brauche ich 30px Platz nach dem letzten Artikel. Ich weiß, dass ich named divs machen kann, aber ich möchte mit Kind der Klasse "small_world_news_Article_box". Aber dieser Code funktioniert nicht.

.small_world_news_article_box { 
    margin-bottom: 20px; 
} 

.small_world_news_article_box:last-child { 
    margin-bottom: 30px; 
} 

Answer 1

starten:

.small_world_news_article_box > div { 
    margin-bottom: 20px; 
} 
.small_world_news_article_box > div:last-child{ 
    margin-bottom: 30px; 
} 

Answer 2

: last-child arbeitet an dem Element theres ein paar von nicht das enthaltende Element.

In Ihrem Fall ist das unbenannte Div, in dem der Artikel enthalten ist, wofür Sie die Klasse anwenden müssen. Also, was Sie brauchen, ist:

.small_world_news_article_box > div{ 
    margin-bottom: 20px; 
    overflow: auto; 
} 
.small_world_news_article_box > div:last-child{ 
    margin-bottom: 30px; 
} 

Sie können mehr darüber lesen, wie es funktioniert alles hier: https://css-tricks.com/almanac/selectors/l/last-child/

Answer 3

Ziel das Kind div der Klasse wie folgt:

.small_world_news_article_box>div { 
margin-bottom: 20px; 
} 
.small_world_news_article_box>div:last-child{ 
margin-bottom: 30px; 
} 

Codepen: http://codepen.io/dragosmicu/pen/ZeXbNY

Clearfix:

.clearfix:before, 
.clearfix:after { 
    content: ""; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
}