no space between childs in class in css

Question

I have this 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>

And I need 20px space between firstarticle-secondarticle and secondarticle-thirdarticle. Also I need 30px space after last article. I know that I can make named divs, but I want to with child of class "small_world_news_Article_box". But this code doesent work.

.small_world_news_article_box {
  margin-bottom: 20px;
}

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

Possible duplicate of [:last-child not working as expected?](http://stackoverflow.com/questions/18995362/last-child-not-working-as-expected) — Dave R., Mar 15 '17 at 13:38

Dragos Micu · Answer 1 · 2017-03-15T14:50:31.947

2

Target the child div of the class like so:

.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;
}

edited Mar 15 '17 at 14:50

answered Mar 15 '17 at 13:38

Dragos Micu

341
1
9

I still have not 20px space between dirst-second and second-third – Vojta Matras Mar 15 '17 at 13:50
http://codepen.io/dragosmicu/pen/ZeXbNY I addeed rest of my css code. Probbably mistake in this – Vojta Matras Mar 15 '17 at 13:56
Sorry now i hope, that it si correct. http://codepen.io/anon/pen/GWMowL – Vojta Matras Mar 15 '17 at 14:25
try adding the clearfix class to divs using the css edited. – Dragos Micu Mar 15 '17 at 14:49

score 1 · Accepted Answer · answered Mar 15 '17 at 13:37

1

Try this:

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

answered Mar 15 '17 at 13:37

Shiva127

2,413
1
23
27

I still have not 20px space between dirst-second and second-third – Vojta Matras Mar 15 '17 at 13:50
codepen.io/dragosmicu/pen/ZeXbNY I addeed rest of my css code. Probbably mistake in this – Vojta Matras Mar 15 '17 at 14:06
Sorry now i hope, that it si correct. http://codepen.io/anon/pen/GWMowL – Vojta Matras Mar 15 '17 at 14:26
Yes, you need to add `overflow: hidden;` to your `.small_world_news_article_box > div` style cause your picture is float and bigger than your div. And `margin-bottom: 0;` to your `ul`. – Shiva127 Mar 15 '17 at 14:34

Web Develop Wolf · Answer 3 · 2017-03-15T15:21:47.223

0

:last-child works on the element theres a few of not the containing element.

In your case the unnamed div the article is contained in is what you need to apply the class to. So what you need is:

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

You can read more about how it all works here: https://css-tricks.com/almanac/selectors/l/last-child/

edited Mar 15 '17 at 15:21

answered Mar 15 '17 at 13:35

Web Develop Wolf

5,996
12
52
101

I still have not 20px space between dirst-second and second-third – Vojta Matras Mar 15 '17 at 13:50
codepen.io/dragosmicu/pen/ZeXbNY I addeed rest of my css code. Probbably mistake in this – Vojta Matras Mar 15 '17 at 14:06
It's really subtle - but if you change the css values as I've done here you can see it does work - http://codepen.io/WebDevelopWolf/pen/WpZrdN – Web Develop Wolf Mar 15 '17 at 14:15
Sorry now i hope, that it si correct. http://codepen.io/anon/pen/GWMowL – Vojta Matras Mar 15 '17 at 14:26
Try it now - I've changed it above - put that in the code pen and it will work :) - http://codepen.io/WebDevelopWolf/pen/OpxNJP – Web Develop Wolf Mar 15 '17 at 14:32
Thank for help, but i addet overflow in my code pen and still no change :/ – Vojta Matras Mar 15 '17 at 14:36
You were missing a : (colon) - http://codepen.io/WebDevelopWolf/pen/QpqEvV – Web Develop Wolf Mar 15 '17 at 15:21

no space between childs in class in css

3 Answers3